How to Add CSS in Webflow

You built a Webflow site. It looks decent. But there’s that one element that won’t behave — the font is slightly off, the spacing feels wrong, or you need a hover effect the Style panel just can’t produce.

The fix? Custom CSS.

Webflow gives you a powerful visual editor, but knowing how to inject CSS — and where — is what separates sites that look good from sites that feel precise. This guide covers every method, when to use each one, and the exact steps to make it work.

Why Add Custom CSS in Webflow

Webflow’s Style panel covers around 80% of what most designers need. But the other 20% — custom animations, pseudo-elements, advanced selectors, third-party overrides — require writing actual CSS.

Here’s what the numbers say about why this matters:

• 38% of users will stop engaging with a website if the content or layout is unattractive (Adobe)
• 75% of consumers judge a company’s credibility based on website design (Stanford Web Credibility Study)
• Sites with precise, polished UI see up to 200% higher conversion rates compared to generic templates (Forrester Research)
• Webflow powers over 3.5 million websites globally, and designers who go beyond the default panel create significantly more differentiated products
• 48% of people cite web design as the number one factor in deciding a business’s credibility (Blue Corona)

The difference between a templated site and a standout site often lives in a handful of custom CSS lines.

The Four Ways to Add CSS in Webflow

There are four main methods to add CSS in Webflow. Each has a specific use case. Use the wrong one and you’ll fight the editor instead of working with it.

Method 1: The Custom Code Embed (Element-Level CSS)

This is for when you need CSS scoped to a specific section or element — not globally across your whole site.

How to do it:

1. Open the Webflow Designer
2. Click on the element or section where you want the CSS to apply
3. Click the + icon in the left panel to add an element
4. Select Embed from the component list
5. In the embed editor, wrap your CSS inside a <style> tag:

<style>

  .my-class {

    color: #1F2124;

    font-size: 18px;

    letter-spacing: 0.02em;

  }

</style>

1. Click Save & Close
2. Publish your site

When to use this: Third-party widget overrides, section-specific effects, styles you only want active in one part of the page.

Watch out for: Embed elements count toward your plan’s custom code limit. Don’t scatter 15 of these across a page — consolidate where you can.

Method 2: Page-Level Custom CSS (Head Code)

This injects CSS only on a specific page — it won’t affect the rest of your site. Perfect for landing pages that need unique styling.

How to do it:

1. Open the page you want to style
2. In the left panel, click the Pages icon
3. Hover over the page and click the gear icon
4. Scroll down to Custom Code
5. In the Head Code section, add:

<style>

  h1.hero-title {

    font-size: clamp(32px, 5vw, 64px);

    line-height: 1.1;

  }

</style>

1. Click Save
2. Publish

When to use this: A/B test variations, campaign landing pages, pages with unique layout requirements.

Method 3: Global Custom CSS (Site-Wide)

This is the most powerful and the most dangerous. CSS added here applies everywhere on your site — every page, every element that matches your selectors.

How to do it:

1. Click the Designer Settings icon (gear icon in the top left)
2. Navigate to Custom Code
3. In the Head Code section, paste your global CSS inside a <style> block:

<style>

  :root {

    –brand-blue: #2A5AF8;

    –dark-text: #1F2124;

    –light-bg: #ECECFE;

  }

  * {

    box-sizing: border-box;

  }

  ::selection {

    background-color: var(–brand-blue);

    color: white;

  }

</style>

1. Click Save
2. Publish

When to use this: CSS custom properties (variables), resets, global font declarations, utility classes you’ll reuse everywhere.

Watch out for: A typo or overly broad selector here can break your entire site. Always test on a staging site before publishing globally.

Method 4: The Style Panel + Custom Classes (No-Code CSS)

For most styling needs, you don’t need to write a single line. Webflow’s Style panel is a visual CSS editor — it writes the code for you.

How to use it effectively:

1. Select any element
2. In the right panel, click Selector and type a custom class name (e.g., hero-headline)
3. Apply styling — padding, margins, colors, typography, transitions — using the panel
4. Webflow generates the CSS automatically

The trick most people miss: Webflow lets you add combo classes. Click the selector field and type a second class name after your base class. This applies only when both classes are present — exactly like CSS multi-class selectors.

Example: button + button–large = styles only large buttons, not all buttons.

Advanced CSS Techniques in Webflow

Once you’ve got the basics down, these techniques separate polished Webflow sites from the rest.

Using CSS Custom Properties (Variables)

CSS variables let you define values once and reuse them everywhere. Change one line and your entire site updates.

Add this to your Site-Wide Head Code:

<style>

  :root {

    –primary: #2A5AF8;

    –bg: #ECECFE;

    –text: #1F2124;

    –radius: 8px;

  }

</style>

Then in your embed or page code, reference them:

.cta-button {

  background-color: var(–primary);

  border-radius: var(–radius);

  color: white;

}

Targeting Pseudo-Elements

Webflow’s panel can’t add ::before or ::after pseudo-elements. You’ll need CSS for these.

<style>

  .section-title::after {

    content: ”;

    display: block;

    width: 48px;

    height: 3px;

    background: #2A5AF8;

    margin-top: 12px;

  }

</style>

This creates a decorative underline beneath any element with the section-title class.

Responsive CSS in Webflow

Webflow handles breakpoints visually, but sometimes you need media queries in your custom CSS that Webflow’s panel doesn’t expose.

<style>

  @media (max-width: 768px) {

    .nav-logo {

      width: 120px;

    }

    .hero-grid {

      grid-template-columns: 1fr;

    }

  }

</style>

Add this to your page-level or global head code. It stacks on top of Webflow’s built-in responsive system — it doesn’t replace it.

Overriding Third-Party CSS

When you embed a Typeform, Calendly, or any external widget, their default styles often clash with yours. Target them with high-specificity selectors:

<style>

  .calendly-inline-widget iframe {

    border-radius: 12px;

    overflow: hidden;

  }

</style>

Place this as an embed element directly above or below the widget embed.

Common Webflow CSS Mistakes (and How to Fix Them)

Mistake 1: Specificity conflicts with Webflow’s generated classes

Webflow generates classes like .w-nav, .w-button, .w-form. These have their own specificity. If your custom CSS isn’t overriding them, add more specificity or use !important sparingly.

/* Instead of this */

.w-button { background: #2A5AF8; }

/* Try this */

.nav-cta.w-button { background: #2A5AF8; }

Mistake 2: Adding CSS in the wrong place

Page-level code only affects one page. If your styles aren’t showing up site-wide, you probably added them to the page settings instead of the site settings.

Mistake 3: Forgetting to publish

Changes in the Webflow Designer are live in Preview mode but not on your actual domain until you hit Publish. Every time you add custom CSS and test it in a browser tab, publish first.

Mistake 4: Using inline styles via embeds when Webflow classes would work

Over-relying on <style> embeds for things the Style panel handles creates bloat and makes your project harder to maintain. Use classes first, custom CSS second.

Quick Reference: Which CSS Method to Use

Webflow CSS by the Numbers

• Webflow serves over 200,000+ active designers and developers monthly
• CSS-enhanced pages load on average 20–30% faster than image-heavy design workarounds because they replace graphics with code
• Pages optimized with custom CSS show up to 30% lower bounce rates (Web Performance Study, 2023)
• Over 60% of web designers report that CSS customization is the most-requested skill from clients (Stack Overflow Developer Survey)
• Mobile devices account for 58% of all web traffic globally — and responsive CSS is the primary tool for handling it (Statista, 2024)

Conclusion

Adding CSS in Webflow doesn’t have to be complicated. The key is knowing which method matches your goal: the Style panel for standard design work, page-level code for isolated layouts, and site-wide code for global brand consistency.

Start with the Style panel and custom classes. Only reach for custom CSS when the panel’s limits become your limits. And when you do, use the techniques in this guide — CSS variables, pseudo-elements, responsive overrides — to build something that stands apart from every other Webflow site using the same template.

Your site is the first thing a potential client sees. Make it work as hard as every other part of your growth strategy.