Streaming live at 10am (PST)

New CSS Preview

Anybody else see this feature in the new video?


Looks awesome

1 Like

Where is it? Haven’t seen this before.

I know it’s been an internal feature for a little while. I think eventually we will get it…? Not sure though.

I hope we get it, it’s a good way to teach native css within webflow

I actually know dev’s who will make layouts in Webflow because the CSS is so clean and then export and hook it up to their web apps.

@John_Merritt I just reached out to a webflow team member. He confirmed that they use it for marketing/education stuff internally only.

You can always export your style sheets with the code option though :slight_smile:

Would be a good feature for us whos using Webflow for prototyping. The devs could easely select a element and grab snippets instead of going through the source code. :slight_smile:

@John_Merritt the Webflow team just released this in open beta! :star_struck:

To access CSS Preview go to the lower left corner of the Designer. Click the “?” and select CSS Preview.



Just noticed this, I’m already finding it really helpful for debugging and working with sites/apps that use exported Webflow code – I hope it stays…

1 Like

This would be so cool.

Unfortunately, mine is just showing up blank - no css information.

Is anyone else experiencing this?

Teresa - Webflow Designer

Click any element on canvas and its properties will show in the css preview

Thank you.

I think it was just a temporary glitch, because it’s working great now. :slight_smile:

Teresa - Webflow Designer

I’m wondering what the deal is with the seemingly custom pseudo-classes (:tiny, etc.).


I just started using Webflow, and am poking around the “Portfolio Starter” template.

Hi @Zeke8990 , Welcome to the forums!

Good eye for a first time poster!

They represent the default breakpoints in Webflow.

tiny: mobile portrait
small: mobile landscape
medium : tablet
large: main

They are initialized in the Webflow main JavaScript file.

 "site": {
        "mediaQueries": [{
            "key": "main",
            "min": 992,
            "max": 10000
        }, {
            "key": "medium",
            "min": 768,
            "max": 991
        }, {
            "key": "small",
            "min": 480,
            "max": 767
        }, {
            "key": "tiny",
            "min": 0,
            "max": 479

Ahhh, of course, thanks! :facepunch:

I love this, it’s already been very helpful.
I also love the pseudo class names via js idea. Smart.

I’ve just found this CSS Preview Beta today and it’s pretty sweet!

However, I can’t copy the text in the preview - which would be very handy!

Using Chrome on Windows 10 -

@Diarmuid_Sexton yes, it’s been around for a while :slight_smile: and unfortunately, that’s not a bug. It’s just the way the preview works. It’s confusing since you can select the text but it doesn’t do anything once you try to copy/paste.

Ok. Does it not seem logical to be able to copy and paste it? I’ve found a workaround but for others, it feels like copy should work natively.

@Diarmuid_Sexton yes, it does, it’s just not built-in at the moment, it’s in beta so maybe that will change?