Custom CSS properties and values

To style HTML elements, you add Cascading Style Sheets (CSS) properties to classes or selectors. In Webflow, the Style panel provides access to many CSS properties (e.g., position, overflow, box-shadow, etc.) — but it doesn’t support all CSS properties.

With custom CSS properties and values, you can incorporate a broader range of CSS properties and values that aren’t natively supported in the Style panel. This gives you more flexibility for styling and reduces the need for custom code embeds, streamlining your design process.

Note: CSS properties with limited browser support and properties with vendor prefixes (e.g., -webkit) aren’t supported as custom properties.

Good to know: Some CSS properties may impact site performance. We recommend optimizing the use of complex CSS functions and properties and minimizing heavy CSS usage where possible.

In this lesson, you’ll learn:

1. How to add custom properties and values
2. How to bind custom values to Webflow-supported properties
3. How to use variables in custom values
4. FAQ and troubleshooting

How to add custom properties and values

Before you get started: Create a class on the element or use a HTML tag selector to select a group of elements to which you want to add custom properties.

To add a custom property to a class:

1. Select the element to which you’d like to apply a custom property
2. Go to Style panel > Custom properties
3. Click Add
4. Type a CSS property name in the name field (e.g., text-decoration-color)
5. Type a value in the field (e.g., #146EF5)
6. Press Enter on your keyboard

Pro tip: You can write custom values that use advanced functions (e.g., calc(), color-mix(), etc.) for more precise and dynamic design control.

Pro tip: You can paste multiple lines of CSS in Style panel > Custom properties. Webflow automagically formats and applies your CSS to the selected elements.

As you type in a property name, an autocomplete list of available properties and corresponding keyboard shortcuts (e.g., Command + 1, Command + 2, etc.) will appear. To autofill the property field, press Command (on Mac) or Control (on Windows) + Number shown in the autocomplete list next to the desired property, or use the Up and Down keys on your keyboard to highlight the property you want to use and press Enter or Tab to select it.

Pro tip: If you’re applying a series of custom properties and values, you can press Tab after typing in a value to save the value and start the next property you’d like to add.

The Designer canvas immediately reflects your changes as you add custom properties and values. If you add a Webflow-supported property and give it a custom value, it will override any existing value set in the Style panel. Like any style applied in the Style panel, you can also apply different values to different breakpoints.

If you want to review the MDN documentation for a particular property, hover over the property name and click View on MDN. You can also hold Command (on Mac) or Control (on Windows) on your keyboard and click the property name to open its MDN documentation in a new tab.

To remove a custom property from a class or tag, hover over the property you want to delete, and click the “trash” icon.

How to bind custom values to Webflow-supported CSS properties

Although you can add custom values to existing Webflow-supported properties by typing them in Style panel > Custom properties, you can also bind custom values to those Webflow-supported font, size, and color properties directly:

1. Open the Style panel
2. Click or hover over the input field where you’d like to apply a custom value (e.g., the input for the width property)
3. Click the purple “dot” icon — note that the purple “dot” icon will only appear on font, size, and color properties
4. Click the Custom tab
5. Type a custom value in the field (e.g., clamp(1rem, 1.5rem, 1.5rem))

Note: You can’t use custom CSS values for background properties (e.g., background color, background size, etc.) or any sub-properties (e.g., box-shadow: 2px custom-value-offset 3px 4px #146EF5).

If you want to apply a custom value to a non-font, size, or color property, you can first add the custom value in Style panel > Custom properties.

To unlink a custom value from a Webflow-supported property, click the custom value you’d like to remove, then click the “unlink” icon. Once unlinked, the value returns to its default in Webflow (e.g., width returns to auto, opacity returns to 100%, etc.).

How to use variables in custom values

You can use variables in your custom values.

Note: You can only use a variable as a custom CSS value if the custom CSS value is the same type as the variable value (e.g., you can only set a color variable as the value of a custom property that accepts color values).

To apply a variable to the value of a property:

1. Open the Variables panel
2. Hover over the variable you want to use as a custom CSS value
3. Click the settings “cog” icon
4. Click the CSS field to copy its value (e.g., var(--webflow-blue))
5. Select the element to which you’d like to apply a custom property
6. Go to Style panel > Custom properties
7. Click Add
8. Type a CSS property name in the field (e.g., text-decoration-color)
9. Paste in the value you copied from the CSS field in the value field
10. Press Enter on your keyboard

Note: If you change the name of a variable used in a custom value, you’ll need to manually update the custom value to match.

FAQ and troubleshooting

I want to use a vendor-prefixed custom CSS property, but the option isn’t in the autocomplete list.

CSS properties with limited browser support and properties with vendor prefixes (e.g., -webkit) aren’t supported as custom properties.

I want to set custom values on a property, but the property isn’t in the autocomplete list.

You can’t set custom values on the following properties at this time:

• background
• background-attachment
• background-image
• background-position
• background-repeat
• background-size
• font-variation-settings
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

My custom value results in an input error.

Please make sure the value you’ve set is valid CSS and is supported by the property you’ve selected. Hover over the property name and click View on MDN to visit the MDN documentation and ensure the property and value are set correctly.

My custom property and value aren’t reflected on the Designer canvas.

If the property and value were set properly but aren’t reflected on the Designer canvas, check any custom code on your site and/or in custom code embed elements and remove any conflicting properties and values. You should also check for any conflicting longhand and shorthand properties — for example, if you’ve set margin-top using the controls in Style panel > Spacing and added a shorthand margin property in Style panel > Custom properties, one value may override the other.

My custom property and value aren’t rendering on the published site.

If the property and value were set properly but aren’t rendering on the published site, check that the browser you’re testing with supports the property and value. You can visit the Can I use? site and search for a CSS property to determine its browser compatibility.

If issues persist, or to report any other issues, please contact the customer support team with steps for reproducing the issue.