Customized CSS attributes and characteristics

To customize HTML elements, you insert Cascading Style Sheets (CSS) attributes to classes or selectors. In Webflow, the Style panel grants access to numerous CSS attributes (e.g., location, overflow, box-shadow, etc.) — however, it doesn’t accommodate all CSS attributes.

By utilizing tailored CSS attributes and specifications, you can integrate a wider spectrum of CSS attributes and values that are not inherently supported in the Style panel. This enhances your flexibility for designing and diminishes the necessity for personalized code embeddings, streamlining your design workflow.

Remark: CSS attributes with restricted browser backing and attributes with vendor prefixes (e.g., -webkit) are not supported as personalized attributes.

Useful insight: Certain CSS attributes might impact website performance. We recommend optimizing the utilization of intricate CSS functions and attributes while minimizing extensive CSS utilization when plausible.

In this tutorial, you will grasp:

1. How to incorporate tailored attributes and values
2. How to link personalized values to Webflow-compatible attributes
3. How to implement variables in personalized values
4. Common inquiries and problem-solving techniques

How to incorporate tailored attributes and values

Prior to commencing: Establish a class on the element or utilize an HTML tag selector to choose a set of elements to which you aim to append tailored attributes.

To append a personalized attribute to a class:

1. Select the element to which you desire to enforce a personalized attribute
2. Visit Style panel > Custom properties
3. Click Add
4. Enter a CSS attribute designation in the designation field (e.g., text-decoration-color)
5. Input a value in the field (e.g., #146EF5)
6. Hit Enter on your keyboard

Insider tip: You can employ customized values that involve advanced functions (e.g., calc(), color-mix(), etc.) for more accurate and dynamic design influence.

Insider tip: You can insert numerous lines of CSS in Style panel > Custom properties. Webflow automatically organizes and applies your CSS to the selected elements.

As you input a property name, an autocomplete compilation of accessible properties and corresponding keyboard shortcuts (e.g., Command + 1, Command + 2, etc.) will materialize. To automate the property field, press Command (on Mac) or Control (on Windows) + Number shown in the autocomplete list next to the desired property, or utilize the Up and Down keys on your keyboard to highlight the property you desire to utilize and press Enter or Tab to select it.

Insider tip: When applying a sequence of tailored attributes and values, you can press Tab after inputting a value to record the value and commence the following property you desire to add.

The Designer canvas promptly reflects your alterations as you introduce tailored attributes and values. If you insert a Webflow-compatible attribute and assign it a customized value, it will supersede any existing value set in the Style panel. Similar to any style applied in the Style panel, you can also impart different values to distinct breakpoints.

If you intend to consult the MDN documentation for a specific attribute, hover over the attribute name and tap View on MDN. You can also hold Command (on Mac) or Control (on Windows) on your keyboard and tap the attribute name to unlock its MDN documentation in a fresh tab.

To eliminate a personalized attribute from a class or tag, hover over the attribute you wish to erase, and hit the “trash” icon.

How to link personalized values to Webflow-compatible CSS attributes

While you can attach personalized values to existing Webflow-compatible attributes by typing them in Style panel > Custom properties, you can also link personalized values to those Webflow-compatible font, size, and color attributes directly:

1. Launch the Style panel
2. Click or hover over the input field where you wish to apply a personalized value (e.g., the input for the width property)
3. Tap the purple “dot” icon — bear in mind that the purple “dot” icon will only appear on font, size, and color attributes
4. Click the Custom tab
5. Input a personalized value in the field (e.g., clamp(1rem, 1.5rem, 1.5rem))

Remark: You cannot employ customized CSS values for background attributes (e.g., background color, background size, etc.) or any sub-properties (e.g., box-shadow: 2px custom-value-offset 3px 4px #146EF5).

If you aim to apply a personalized value to a non-font, size, or color attribute, you can first append the personalized value in Style panel > Custom properties.

To detach a personalized value from a Webflow-compatible attribute, tap the personalized value you desire to erase, then tap the “unlink” icon. Once unlinked, the value reverts to its default in Webflow (e.g., width reverts to auto, opacity reverts to 100%, etc.).

How to utilize variables in personalized values

You can integrate variables in your personalized values.

Remark: You can solely utilize a variable as a personalized CSS value if the personalized CSS value is the same type as the variable value (e.g., you can solely set a color variable as the value of a personalized attribute that accepts color values).

To associate a variable to the value of an attribute:

1. Initiate the Variables panel
2. Hover over the variable you desire to use as a personalized CSS value
3. Tap the settings “cog” icon
4. Tap the CSS field to replicate its value (e.g., var(–webflow-blue))
5. Select the element to which you wish to apply a personalized attribute
6. Advance to Style panel > Custom properties
7. Click Add
8. Input a CSS attribute designation in the field (e.g., text-decoration-color)
9. Paste in the value you replicated from the CSS field in the value field
10. Hit Enter on your keyboard

Remark: If you alter the name of a variable utilized in a personalized value, you will need to manually update the personalized value to align.

FAQ and troubleshooting

I aspire to utilize a vendor-prefixed personalized CSS attribute, but the choice is absent in the autocomplete list.

CSS attributes with restricted browser backing and attributes with vendor prefixes (e.g., -webkit) are not supported as personalized attributes.

I wish to define personalized values on an attribute, but the attribute is not in the autocomplete list.

You are unable to define personalized values on the following attributes currently:

• 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 personalized value results in an input error.

Kindly ensure the value you have set is valid CSS and is supported by the attribute you have selected. Hover over the attribute name and tap View on MDN to visit the MDN documentation and ensure the attribute and value are set correctly.

My personalized attribute and value are not reflected on the Designer canvas.

If the attribute and value were configured appropriately but are not reflected on the Designer canvas, scrutinize any custom code on your site and/or in custom code embed elements and eliminate any conflicting attributes and values. You should also inspect for any conflicting longhand and shorthand properties — for instance, if you have defined margin-top using the controls in Style panel > Spacingand appended a shorthand margin attribute in Style panel > Custom properties, one value may take precedence over the other.

My personalized attribute and value are not rendering on the published site.

If the attribute and value were configured correctly but are not rendering on the published site, confirm that the browser you are testing with supports the attribute and value. You can visit the Can I use? site and search for a CSS attribute to determine its browser compatibility.

If issues persist, or to report any other concerns, please reach out to the customer support team with steps for duplicating the issue.