New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 497522 link

Starred by 475 users

Comments by non-members will not trigger notification emails to users who starred this issue.

Issue metadata

Status: Assigned
EstimatedDays: ----
NextAction: 2017-07-01
OS: All
Pri: 2
Type: Feature

Sign in to add a comment

Implement backdrop-filter from Filter Effects Module Level 2

Reported by, Jun 7 2015

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2421.0 Safari/537.36

Example URL:,css,output

Steps to reproduce the problem:
1. Visit,css,output
2. The box's background should be a blurred version of its backdrop
3. Adjusting the sliders should change the effect

What is the expected behavior?
The box has a background of a blurred version of its backdrop.

What went wrong?
The backdrop-filter property isn't supported, so nothing.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No Everything that isn't webkit admittedly everything

Chrome version: 45.0.2421.0  Channel: canary
OS Version: OS X 10.10.3
Flash Version: Shockwave Flash 18.0 r0

This has already been implemented in Webkit nightlies (although a few months later and its still in the nightlies). Could this be implemented in Chromium nightlies as well?
Showing comments 59 - 158 of 158 Older
Hi there :) Any updates about this feature? We are really looking forward to use it in our products.
Working fine here if you enabled the new features, although it does NOT work with the -webkit prefix.  Also, it seems to only work on previous layer IMG tags, not on   images that are part of element's background ... ie works on elements, not element backgrounds.  I don't know if this is a bug or feature.

Comment 61 by, Sep 23 2016

The -webkit- prefixed property is not supposed to work, so this is by design.
I am not sure regarding the background-image. I expected it to be filtered as well.
But it is not.
I looking for this feature!!! 
Blockedon: 593307
Blockedon: 615722
Blockedon: 582219
Blockedon: 547937
Blockedon: 632979
Blockedon: 659501
jaydasika@, what is the current status of this work? Predictability program has set an OKR to gain traction on the top 50 starred bugs this quarter: either by closing them, stating what milestone the fix will ship, or setting a NextAction date so that we know when to check back.
NextAction: 2017-04-03
I am focusing this quarter completely on finishing up work on cc property trees and will not be able to do anything for this bug. So, setting the NextAction date to beginning of next quarter. 

Comment 74 Deleted

Thanks, jaydasika@. So, is this work planned for next quarter, or is that when you will assess if that is the case?
How does the work going? When can we expect to be able to use the feature? Thanks for informations and good luck !
Components: -Blink>CSS>Filters Blink>Compositing>Filters
NextAction: 2017-07-01
I don't expect much work to happen for this in Q2 as we decided not to have a OKR for this in Q2. Setting the NextAction date to beginning of next quarter. 
Blockedon: 626762
Owner: ----
Status: Available (was: Assigned)

Comment 81 by, May 13 2017

Hi. Does it mean it will be released in chrome on July 1st 2017? (version 62?)
I hope for it so much, this feature would be really game changing for web design, I can't wait for it !

Comment 83 by, May 13 2017

#81 - it only means the team will not get to it before July 1st. The team may get to it a lot later. No time frame at all.

Comment 84 by, May 13 2017

Oh ok. Thank you for the clarification. I was confused by this `Status:	Available`. Thanks!

Comment 85 by, May 13 2017

If the status is Fixed or Verified, it means that the feature is fully implemented (modulo bugs). The rest of them means it is not fully implemented yet.
Hallo! Just wanted to add (I am sure you already know this, but just incase) that when you set a border-radius, the filter does not abide by the rules. For instance, if you use the blur filter, you will still see a square blur, not a cornered blur.
I updated but I don't know how to re-open it. I think someone else needs to.

The border-radius bug is related to that one, because the basic problem is that the effect is not clipped to the edges of the background painting area.
The NextAction date has arrived: 2017-07-01

Comment 89 by, Jul 13 2017

I'd love to see this feature this year. It will change the look of the internet.

Comment 90 Deleted

I strongly endorse the Comment 89. Examples of real world use cases: blur filters in context menus, sidebars, toolbars, docks, are out there for a considerable amount of time now, firstly in macOS and iOS and more recently in Windows 10 with the Fluent Design System. It's more than time for the Web to evolve into a path that avoids us using hacks to solve trivial design problems. A terrible hack with duplicated background fixed images ( would be so easily solved with backdrop-filter (
@Eric: Backdrop blurs date as far back as Windows 7, aero theme. Not that it matters, just to agree it's about time we get this on the web. Gimmick or not, sometimes the web needs something exciting and beautiful. 

Would be great to get it working on chrome rather soon. I agree, I don't think it is only a gimmick, it adds value and new possibilities for the web.
I agree with everyone, Chrome really need this feature, It's anormal that Safari already have it for years instead of Chrome...
Do these comment have any effect? Does Google prioritize thing based on user feedback?

Comment 96 by, Jul 20 2017

#95 - they probably have a negative effect (waste the time of Chrome engineers).
Interested people should just star the issue instead of adding a me-too comment, unless it mentions a yet-unmentioned use case.
Concur with #93 - this is not some "nice to have" it really is a significant ability to filter the things below a div in a z-organized stack of elements. I will add that Android material design, ios/macos, and windows 10 fluent design all provide this kind of functionality.
Computationally blur is expensive. Hopefully Chromium developers are taking the time to carefully consider how to maintain good user experience (in terms of performance and battery life). 

Comment 99 by, Aug 14 2017

Hugely useful feature. Any chance of an update on general progress / prospects for general release?
yes, this would be awesome.

Comment 101 by, Aug 29 2017

my most expected feature of this year!
I would really like to see this feature land in Firefox (and all other browsers). It is such a simple and powerful way to achieve effects that make UIs easier on the eyes, more readable, etc. (Sharp text on top of blurred backgrounds is far easier to read and more 'natural' for our eyes to make sense of than the same text on top of a semi-opaque but still-crisp background.) 

The blur-behind paradigm has been crucial for Apple UIs for a very long time and it would be really great to have simple parity in this regard on the Web.

I know that a similar effect is possible by blurring everything except the foreground, but this is not a practical approach very often, and it breaks the principle that components/widgets/elements/etc should only care about their own concerns. With backdrop-filter, I can ship a modal dialog implementation with a backdrop that blurs whatever is behind it. I do not have to touch anything else in the document. Without backdrop-filter, I have no other choice but to go and blur everything else manually, which may not even be possible if the rest of the page is re-rendering itself and discarding my DOM manipulations.

Been using/testing this feature for the past few days. Yesterday after an update to Chrome the blur effect seems a lot more stable (it was a bit twitchy before, for lack of a better word)

Is this an indication that it will be ready soon? 

Blockedon: 767997
Is there any hint about a potential public release date yet?

From what I see in the with the flag enabled, the filter looks quite good actually.
The feature is on hold and no further development is happening. No timeline yet
on when it might be finished, sorry.

Comment 107 by, Nov 25 2017

We can learn how to achieve this in vanilla WebGL faster than waiting for this to be released. xD

But seriously, this would be an awesome feature to have. Just imagine the beauty that UIs will have with this feature. It would be a huge benefit for the web if all browsers had this.
Other browsers: Edge, Windows 10 build 17063: CSS backdrop-filter is now enabled by default
Comment 106 from

For real? Is this a real statement about this highly requested and demanded feature? We users, we web designers and developers need this feature, is a all new way to build awesome UI's for our users! Please, don't let this feature to drop. 

By the way: Edge 17 support this feature by default in Windows 10 Insider Preview Build 17063. So we have to move to Edge?

 Issue 798267  has been merged into this issue.
It's been 2.5 years now of having a 80% implementation with no sign of getting to a full implementation. With Apple having this for years now, Edge having it soon and Firefox committed to it, this could be the year to bring this to the web across the board.

I really hope the priority gets bumped. It seems starring the issue is the go-to way for democratic voting, but the backlog seems full of issues with 10 times more stars for issues that are tiny, having little value to only a tiny user base. Whilst this is a design game changer across the board.

I respect that we don't fully control priority, but this one is so close and halting for so long, whilst being such a delightful feature. 

Sorry, I'm just passionate about this one. I can't help with coding but willing to help in testing.
All: please star this issue if you would like it implemented, rather than
commenting further. We use stars as one measure of whether to implement a 
Blockedon: 813796
I think chrome guys are that jealous of Apple, Since Apple products seems to use more blur filters including iOS. other than that no reason to implement this feature already in chrome.
#114 - Blur filters would be a very nice feature to have, both from the design aesthetics perspective, and also have more practical uses (eg focusing user attention on areas of the screen requiring their attention.)

Yes, Apple use it a lot, to good effect, so no harm in giving them credit for taking the lead. But we also see Edge supporting it, and Firefox committed to it too. So soon it will just be Chrome perceived as the one left behind, as the down-level browser with 'ugly' looking sites.

Jealous? Maybe, but more positively, excited with the anticipation of being able to use it once the bugs round the edges are ironed out. Either way, I'd encourage anyone who wants to see this to star it. Let's get it done!
A full page div with backdrop filter result in vignette like appearance over the edges of my screen. 
551 KB View Download
I definitely support adding this. Our designers are asking for it, and it'd help us out a lot!
Back in January at #112 said "All: please star this issue if you would like it implemented, rather than commenting further. We use stars as one measure of whether to implement a feature." and since then we've had a lot more people starring this - right now it is at 300, and it has leapfrogged a large number of other issues.

So it would be great to have some insight into the official thinking about how this fits into current priorities, given how popular this would be.
Wouldn't this be easier to implement in Chrome since it's already in Safari stable?
we designers really need this !
Yeah, this is really a good effect to have as soon as Safari and Edge are already including it ! Thanks
I'm a designer and would really appreciate this being implemented in Chrome! Especially since the other browsers already support it. Thank you!
I use this feature too and would appreciate it being prioritized.
Any updates on this?
Waiting for that since 3.5 years now
That's the only thing I'm missing for a perfect interface

Agree with comment 118: we were asked to star. We did. Current position is #15 in the total list. Serious question:  how many stars does it take to get this issue moving again?

What's the status of this? It's an amazing feature and Safari and Edge already support it (without a flag).

I noticed is actually already using this in their menu bar.
I suspect we need to demonstrate the desire in the design community for this, and I suggest a multi-pronged approach:

First, get as many stars as possible: tell your friends and colleagues, and get them to do so too. Let's get the numbers of stars right up. They asked for stars; let's give them stars!

Secondly, as part of that, but also to spread the word to a less technical audience, blog about the issue, provide examples of designs with-and-without, and generally whip up enthusiasm for this. Bonus points if you can get it covered in the technical press.

Finally, maybe even use a browser-detecting script to give Chrome users of your sites a notice that says "Sounds crazy, but this site looks better in Safari or Edge. Click here to find out why" etc.

And to any Chromium people reading this who can shed any light on what the hold-up is: please post your insights here - or nudge someone who can. Ultimately we're all on the same side just trying to make the product better, but it's really hard when you're not communicating with us.
Starred.  Been watching this property for over a year.  Personally I really want gaussian blur on the backdrop to do iOS-style blurred translucency.  But for now I am stuck not using such an effect since there really exists no suitable fallback effect for Chrome.  Does anyone know what's blocking the feature from coming out from behind the flag?
Currently on the one hand Edge and Safari do have better support than Chrome ones and do not require any flag to be enabled to use it. On the other hand, it also requires Webkit prefix in order to work on these browsers (Edge and Safari)
Let's bring backdrop-filter to chrome!
Hi all,

Thanks for all of your enthusiasm. While we can't promise when
the feature will be added, I wanted to let you know that we did hear your comments.
We're going to try to make progress on this feature in the next few months. Thanks a lot for the update, much appreciated, and good luck. Can't help with coding, but if I can contribute in other ways (describing use cases, testing alphas/betas), I'd happily chime in. I'm sure there's lots of willingness from the community to help with this one.
Thank you for the update

I just want to say that as a designer and developer, this is a game-changer for me in terms of the experiences I can bring to users.

I thought something like this was never going to happen, but now that I realize it's so close, I want it so much more. There is almost always an alternative way of doing things on the web, but there are almost no alternatives for an effect like this. I signed in for the first time ever to star and leave a comment.

Thanks for listening, good luck and godspeed!
 I can't wait to hear more on this topic!))
Another one here keen to see this in Chrome (better late than never!). Here's a demo for testing in Safari / Edge / Chrome, drag the modals around to see the result, and compare the shadow and round-corner rendering: (

Comment 139 Deleted

It's one of most starred issues here and yet nothing after years. Please at least enable current implementation by default (without experimental flag).
Waiting here too. Microsoft EDGE has this now too for months i guess, i.e. since Win10 17063. We put "best viewed in EDGE/Safari in our public-facing projects as of the moment. We created fall backs like @support css rules just in case the feature is ready for Chrome. godspeed on this feature xD 
we want or perhaps need this feature too. some customers are always happy seeing new eye-candies on their web apps, rather than the usual flats. 
Status: Assigned (was: Available)
Thank you for the comments about this feature. We may restart work on this
feature soon, please stay tuned. The next step is to fix an error in the specification.
Note that current implem is supposedly affected by this bug:
One of the few features that I can't believe haven't been implemented yet. The slick designs you can create with this has been one of the few things I love about iOS and Safari and have been waiting for forever. Really look forward to being able to use this more broadly. 
Labels: Hotlist-Interop
Adding Hotlist-Interop as this is now in stable versions of Edge and Safari (confirmed using,css,output).

Here's the Firefox bug for the same feature:
Chromium could have been 3 years ahead.
Developper/Designer here. This feature is much needed, please make it available.
I use this in safari quite a lot, one issue I’m noticing is that if a box shadow is applied to the same element that the backdrop filter, the shadow inherits the backdrop filter breaking any illusion
51.5 KB View Download
While I would love to see this implemented, I'd much more prefer Chrome to not crash when visiting pages such as the one mentioned in comment #144. So please take your time in implementing this carefully :)
Blockedon: 622128
I'm curious about #152 marking this is blocked on 622128, given that it is shown as fixed. Is this for historical interest, or is 622128 still an active issue here somehow?
I'm just making sure all potential/past issues are linked against this bug, so I have a checklist to verify against at the end. I did look into 622128 and it does appear fixed.
Blockedon: 745012

Comment 156 by, Nov 12 (4 days ago)

Blockedon: 904592
Project Member

Comment 157 by, Nov 13 (4 days ago)

The following revision refers to this bug:

commit 91e518cb31819aba7ea704d09303fb3a80265c4e
Author: Mason Freed <>
Date: Tue Nov 13 02:22:50 2018

Re-plumb backdrop-filter through blink-gen-property-trees

With this CL, backdrop-filter will continue to work when the
--enable-blink-gen-property-trees flag is enabled. Behavior should be
identical to behavior without the flag.

Also, I added a number of layout/WPT tests for backdrop-filter,
some of which currently pass, and some of which need fixing. The ones
that need fixing have been added to TestExpectations. These new tests
should reproduce (at least) these issues:
 - - respecting isolation
 - - respecting isolation
 - - border radius
 - - filter plus backdrop-filter
 - - boundary effect problems

I also moved the existing tests out of external/wpt/css/css-filter
into external/wpt/css/filter-effects, where they really should be,
now that filter-effects is being pulled into the tree.

Bug: 497522,314867,525099,547937,524689,745012
Change-Id: I2be33fbc0e17dec2cd138f9796971fb4a9a57216
Commit-Queue: Mason Freed <>
Reviewed-by: Philip Rogers <>
Cr-Commit-Position: refs/heads/master@{#607447}

Project Member

Comment 158 by, Yesterday (32 hours ago)

The following revision refers to this bug:

commit 01e30939a4710efa881c05fe91097c9596a8251a
Author: Mason Freed <>
Date: Thu Nov 15 22:05:41 2018

Adding more layout/WPT tests for backdrop-filter

These should reproduce (at least) these issues:
 - - dark areas brought in from edges
 - - dark areas brought in from edges
 - - menus cause too much filtering
 - - menus cause too much filtering
 - - incorrect border used for filter
 - - incorrect border used for filter

Bug: 497522,622128,632979,659501,767997,813796,593307
Change-Id: Iafea2fc8fffba950f74d27f21170df647dc62e29
Commit-Queue: Mason Freed <>
Reviewed-by: Chris Harrelson <>
Cr-Commit-Position: refs/heads/master@{#608537}

Showing comments 59 - 158 of 158 Older

Sign in to add a comment