CSS Preview

You can see the code write itself when using CSS Preview

This video features an old UI. Updated version coming soon!

The Style panel in Webflow lets us use the same CSS properties used by Apple, Google and Stripe to push the boundaries of what’s possible on the web.

In this lesson:

  1. CSS Preview
  2. Code export

CSS Preview

You can see the code writes itself when CSS Preview is open and you’re making style changes to any element. 

To open CSS Preview:

  1. Click the Help icon at the bottom of the left panel (to see the available options)
  2. Select CSS Preview

Code Export

You can export the code to hand off to a developer, or to use the code somewhere else. 

And you can export in 2 steps:

  1. In the top panel, click the Export icon. 
  2. Then, click the Prepare zip button

A download of all of your project files will begin so that you can use those files however you like.

That’s it! That’s coding CSS in Webflow without coding CSS. In Webflow.