Shopify theme editor doesn't allow saving "filters" CSS directive

Store Design
, ,

Topic summary

Users are encountering an error when attempting to save CSS filter properties (e.g., filter: brightness(75%)) in Shopify’s theme editor Custom CSS section. The editor preview displays the effect correctly, but publishing fails with an “Online Store editor session can’t be published” error.

Proposed workarounds:

  • Use decimal values instead of percentages: filter: brightness(0.5);
  • Apply the vendor prefix: -webkit-filter: brightness(50%);

Limitations:

  • The -webkit-filter workaround has limited browser support

Status:

  • Multiple users have requested official guidance from Shopify staff
  • No official response or permanent solution has been provided yet
  • The issue remains unresolved
Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Adding something like “filter: brightness(75%);” to the “Custom CSS” of a “Section”, in the “Customize” theme window, results in a popup stating “Online Store editor session can’t be published”. The editor window reduces the brightness as expected, but the save fails.

Is this a bug or expected behaviour? Is there a solution to saving the theme with the “filter” CSS directive?

6 Likes
2

Same problem here, can someone from Shopify answer this question?

1 Like
3

Use "filter: brightness(0.5); " instead of “% sign”

4

or -webkit-filter: brightness(50%);

1 Like
5

-webkit-filter property works but it’s not supported on all browsers.

Can Shopify staff provide a solution please?

1 Like
6

I came to the forums with a question about filters, and saw this.

@Matei86 where is -webkit-filter not working? I’ve tried it in Edge, Chrome, Vivaldi (all Chromium based), Firefox, and mobile Safari.

7

When in doubt Move the css to HTML tag inside a custom liquid section/block/setting instead

For Custom-CSS settings the restrictions can be non-obvious, the static analysis of the CSS code can be hit or miss even if not defined in the “considerations” of the docs for Custom-CSS settings https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css#css-considerations

8

Not bad advise, when it’s possible to easily do. I’d still like to learn why -webkit-filter works for all browsers I’ve tested.

9

“-webkit” is not “all” browser a webkit based browser did you research the CSS rule etc… regarldess:
This thread is about Custom-css settings and what that supports.

NOT about everything anything that happens on the internet due to cross-browser compatibilityissues for browser specific suffixes.

11

thanks edited the typo and for clarity