The CSS property
backdrop-filter allows you apply graphical effects like blur and color filters to the background of your element. This property can help you create awesome effects in your webpage.
But, there is one problem. Its not supported in Internet Explorer and Firefox. The good news is you can enable it in Firefox. So, if you are a Firefox user, you can still test your webpages that use
backdrop-filter. But, even if you enable it in your browser, most likely, it won't be enabled in your clients' browser. So, you should always design your pages so that it looks good with and without
According to caniuse,
backdrop-filter can be enabled in Firefox versions 70 and above. To enable this property, follow these steps:
Open a new Firefox tab and type
about:configin the address bar. Press Enter.
You should see a warning. Click on the button saying Accept the Risk and Continue. This message is shown because on this page, all experimental features are present which may produce glitches when enabled and hinder performance, including the
layout.css.backdrop-filter.enabledin the search bar. You should see the value is set to false. On the extreme right, there is a reversible arrow (or whatever you call it). Click it to change the value to true.
- Next, type
gfx.webrender.allin the search bar. Its should also be false by default. Change it to true similarly.
Now you can close the tab and see
backdrop-filter in action. Remember that it might produce glitches, so, don't panic, we can only wait for the developers to fix those glitches in the near future.