CODEWITHSUNDEEP
css
w1kner
w1kner

Reputation: 39

backdrop-filter: blur() not working

Trying to apply the backdrop-filter to achieve a blur effect on the elements behind another element. However, the browser aren't able to apply this effect. The browser is Chrome.

The inspector:

Any tips in how to get this to work?

Thanks in advance.

Upvotes: 1

Views: 16145

Answers (2)

Elsa
Elsa

Reputation: 96

I found out that elements with transparent background get incorrectly blurred. So make sure your page is not transparent. In my case, adding this worked like charm.

body {
    background-color: white;
}

Hope it helps :)

Upvotes: 4

BoltClock
BoltClock

Reputation: 723498

backdrop-filter is currently guarded by the "Enable experimental Web Platform features" flag in Chrome, prefixed in Safari as -webkit-backdrop-filter. It will not work unless the end user has configured that flag.

Upvotes: 9

Related Questions