Figma Support Forum

Generated CSS for "filter" parameter generates with commas instead of spaces

When you apply multiple Effects to an element and the generated CSS uses the filter parameter, the value uses commas between the different filters instead of spaces. The commas are invalid in CSS, so they have to be manually replaced before you can use the CSS.

For example, if I create a Group, and add a layer blur and a shadow, the generated CSS looks like:

filter: blur(4px), drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

However, valid CSS uses spaces to separate multiple properties instead of commas.

Valid CSS would look like this:

filter: blur(4px) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

Ideally, this would be generated correctly so it can be copied and pasted into a CSS file without having to modify it.

Steps to Reproduce

  • Create a rectangle
  • Right-click the rectangle, and “Group selection”
  • Add multiple effects to the group, e.g. drop shadows or blurs
  • Right-click on the group and choose Copy/Paste->Copy as CSS, or check the Inspect tab to see the invalid CSS for the filter