CSS preview

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Webflow’s Style panel gives you a visual interface to design with the same CSS properties used across the web. With CSS preview, you can watch the code write itself as you make style changes on your site.

CSS preview displays styles applied to a container element, including padding, display, position, etc.

You can access CSS preview from the Style panel by clicking the “more options” dots and choosing CSS preview. You can also open CSS preview via the top bar of the Designer by clicking the Webflow logo and choosing CSS preview from the hamburger menu that appears on hover.

Watch the code write itself when using CSS Preview

Pro tip: You can also export your site’s code to hand off to a developer or to use outside of Webflow.

Table of contents

Continue learning

Convert elements

Figma to Webflow App

Add a Spline scene to your Webflow site

Add or remove Workspace seats and members

Align box overview

Archive a site

Archive your Workspace

Asset privacy

Build a locale switcher

Canvas settings

Choose a Site plan

Choose a Workspace plan

Code block

Component properties

Copyright (DMCA) Takedown Notice

Create static page templates

Create your Workspace

Custom CSS properties and values

Custom element

Custom gradient border

Delete Collections

Delete your Webflow account

Downgrade or cancel your Site plan

Downgrade or cancel your Workspace plan

Duplicate a site

Import/export 301 redirects

Integrate the HubSpot App

Keep your Webflow account secure

Learning Assistant

Localization overview

Localize Collection content

Localize content and styles

Localize page settings

Localized SEO and locale routing

Manage add-ons

Nest components

Pointer events

Proration and refunds on Workspace and Site plans

Save and publish Collection items

Set a global canonical tag to improve SEO

Site-specific access

Slots

Switch between Workspaces

Switch your Workspace or Site plan billing frequency

Transfer a site

Update your Dashboard notification settings

Update your email subscription settings

Update your text notification settings

Updates to our Site & Workspace plans for July 2024

Upgrade your Site plan

Upgrade your Workspace plan

Upload an Apple associated domain file

Use components in Collection lists and Collection pages

Variables

View all invoices for Workspace and Site plans

View and update your payment card

View your account security activity

Workspace billing and invoices

Workspace settings overview

Edit mode

Manually connect a custom domain

Manually connect a custom subdomain

Quick connect a custom domain

Quick connect a custom subdomain

Webflow Apps overview

Publishing workflow

Add Shopify products to your Webflow site

Connect Webflow to third-party apps with Zapier

Embed Soundcloud tracks on your Webflow site

Embed an Eventbrite checkout on your Webflow site

Embed dynamic Twitter share buttons on your Webflow site

Integrate Optimizely for A/B testing

Embed an Instagram feed on your site with Elfsight

Control text wrapping and line breaking

Single Sign-On (SSO) Login