140

backdrop-filter is a recent CSS feature, that is not yet available in modern browsers (at least as of July 1, 2016).

  • Chrome 51 supports backdrop-filter via Experimental Web Platform flag.
  • Safari 9.1 supports it with -webkit- prefix
  • Firefox 47 have no support

Being in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.

JS workarounds for blur, grayscale,… are also welcome

The development of backdrop-filter can be tracked through https://bugs.chromium.org/p/chromium/issues/detail?id=497522

5
  • 1
    can you please elaborate by specifying exactly what you want?or explain the new feature
    – Sriker Ch
    Commented Jul 1, 2016 at 12:26
  • 1
    @SrikerCh blur, grayscale filters Commented Jul 1, 2016 at 12:31
  • 1
    star the issue in chrome bug tracker to get it sooner: bugs.chromium.org/p/chromium/issues/detail?id=497522
    – Ali
    Commented Sep 4, 2018 at 20:14
  • use another div to set background and the effect you need and use position and size same as the target element and apply filter, which won't affect the contents of target element
    – 27px
    Commented Dec 9, 2020 at 5:12
  • TL;DR: Use e.g. filter: blur() etc. instead.
    – Andrew
    Commented Mar 1, 2021 at 10:45

10 Answers 10

155

I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for backdrop-filter I'm using a slightly transparent background as a fallback:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

The filter will work in currently supported browsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed backdrop-filter if the spec doesn't change before that.

Examples without and with backdrop-filter support:

transparent fallback blurred

3
95

Update as of 5/01/22:

Backdrop Filter has received further support, check the link for the versions of each browser that support it and a quick tutorial.

Syntax:

.element {
            backdrop-filter: <filter-function> [<filter-function>]* | none
         }

Older Solution

I don't know if you're still chasing this question, but for other users in future:

This effect can be accomplished as follows with CSS Pseudo-Classes, no JavaScript is necessary! shown below:

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}
<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

Live example can be seen on Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Quick Note:

Depending on the structure of your HTML document, your z-indexes may be different to the one described in the example.

8
  • 17
    Good workaround. But has a fallback because other elements over the background won't be blurred. Commented Aug 25, 2016 at 16:23
  • 9
    The only issue with this is that it's not dynamic of course. It's tied to a static image. But good workaround for that specific case :)
    – Megaroeny
    Commented Feb 14, 2018 at 17:07
  • 4
    As I understand, the :before pseudoclass gets the same background-image as body on which we just use filter: blur(2px); So this trick won't work for other elements in the background.
    – Kardaw
    Commented Jul 14, 2018 at 22:58
  • i knew this would be possible with javascript. u dont know how many ppl on SO r going around telling ppl this isnt possible unless u use JS
    – oldboy
    Commented Mar 29, 2019 at 18:56
  • is there any way to do this while using main { width: calc(100% - 48px); max-width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); }? i cant seem to get it to work :/ if i apply transform: translate(50%, 50%) to the blurred pseudo element, the blurred image matches the actual image, but the position of the blurred part is misaligned.
    – oldboy
    Commented Mar 29, 2019 at 19:41
22

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

https://web.dev/backdrop-filter/

NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is planning to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

11
  • 65
    Currently on Firefox 74 and still no support for backdrop-filter. Not everyone uses Chrome or a chromium-based browser, also, I downvoted this because this is not the answer to the question. Commented Mar 31, 2020 at 12:34
  • 7
    Thanks for the downvote. Since the question was "workaround to backdrop-filter", I thought people might be interested in knowing that a workaround is not needed for Chrome. Firefox is in development for this feature, and it can be tried out today using the layout.css.backdrop-filter.enabled flag. Commented Apr 1, 2020 at 19:08
  • 3
    @Bruno Finger Firefox support backdrop-filter but you need to change two options on about:config check this out Commented Jun 18, 2020 at 8:29
  • 1
    Well, it's late 2020 and Firefox still doesn't have it! Too bad it is still behind a couple flags, so yup...that's not the correct answer for a "workaround". Commented Dec 22, 2020 at 3:04
  • 1
    The main reason I implemented backdrop-filter in Chromium was that there isn't a real workaround for this feature. Applying a filter to just the content behind an element, especially if either the backdrop content is moving (e.g. video) or the foreground element overlaps many separate elements, is practically impossible. Hence my desire to point out the state of the native implementations. I would guess many people come here looking for a workaround, get disappointed, and wonder when the feature will be available. Commented Feb 14, 2021 at 19:45
14

Use SVG filters. They work like a charm. Checkout this example CodePen.

backdrop-filter is now supported by default in Chrome Canary. It's also in the 2019 priority list for Firefox development. So, it will soon be supported across all browsers, but for now you can use SVG filters.

Update

SVG filters don't work exactly like backdrop-filter. It's only a workaround and it doesn't work if there's moving elements beneath it. Anyway, I think we're going to be able to use backdrop-filter in production very soon. It's now enabled by default in Chrome Beta! Which also means Edge.

3
  • Whilst links to external sources to back up your answer is very much encouraged, we discourage "link-only" answers as they are rendered useless if the link expires. Please update your answer to include the full solution. Commented Jun 13, 2019 at 13:39
  • Sounds great. Interesting use of SVG filters. Commented Jun 15, 2019 at 9:33
  • 1
    "very soon" ^^ It's been too years and FF haven't released it to prod yet 😥
    – Gyum Fox
    Commented Aug 23, 2021 at 11:42
4

I think this is a good solution to wokraround backdrop-filter, but not the same:

you can use it with @supports css rule

@supports not (backdrop-filter: blur(4px)) {
    body > *:not(#element) {
        filter: blur(4px);
    }
}

body > *:not(#element) { /* select every child element in body but not the specified one*/
    background: #9fe2ff;
    filter: blur(4px);
}
#element {
    position: absolute;
    top:20%;
    left:10%;
    background-color: #ffffff;
    z-index:10;
}
div, p {
    margin: 5px;
    padding: 10px;
}

    
<body>
    <div>div element with some text</div>
    <p>paragraph with another text</p>
    <div id="element">Not blured element</div>
    <div>Another div with blured text</div>
    <p>another p </p>
</body>

3

Just want to add specific workaround that works for me, maybe it's useful for someone out there.

The idea is to wrap every element that should be behind the popup into .blurred and make it blur with filter: blur(10px); (which has better browser support) to it, but then the popup element itself should be outside .blurred.

in code it looks like this:

.blurred {
    position: relative;
    z-index: 0;
    filter: blur(4px);
}

.popup {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.popup__box {
    margin-top: 20px;
    background-color: rgba(255, 0, 0, .1);
 }
<div class="blurred">
  <div>Maybe a navbar goes here</div>
  <h3>Hi, I'm blurred</h3>
  <img src="https://filesamples.com/samples/image/jpg/sample_640%C3%97426.jpg" alt="sample"/>
  <div>Maybe a footer goes here</div>
</div>

<div class="popup">
  <div class="popup__box">
    Hi, I'm a popup
  </div>
</div>

The downside to this workaround is that you have to wrap everything inside the .blurred class, which can be hard (at least for me) sometimes to manage the z-index with other element outside.

2

As explained on this page changing the value of the preference layout.css.backdrop-filter.enabled from false to true on the about:config page seems to work for me.

I'm using Firefox Developer 87.0b1 (64 bits)

1
  • 1
    I think it's necessary to enable gfx.webrender.all too... or does it work with only that? Anyway, it won't work on a prod app because you can't ask your customers to enable these features on their browsers. Commented May 21, 2021 at 16:16
0

You could try to add different filters to the background images:

https://css-tricks.com/almanac/properties/f/filter/

The downfall to this, is that it only works on images.

Basically, there are 10 built-in filters for the CSS filter property:

  • blur(px)
  • brightness(%)
  • contrast(%)
  • drop-shadow(h-shadow v-shadow blur spread color)
  • grayscale(%)
  • hue-rotate(deg)
  • invert(%)
  • opacity(%)
  • saturate(%)
  • sepia(%)

And additionally, you can provide it an url, wich contains an XML file with the appropariate filter.

0
0

In case you need to check the availability of backdrop-filter within Javascript you can use:

CSS.supports("backdrop-filter", "blur(10px)")

In a condition:

if (CSS.supports("backdrop-filter", "blur(10px)")) {
     // some code when supported
} else {
     // some code when not supported
}

This works not for Internet Explorer so if there is a fallback it's better.

0

All desktop browsers appear to now support drop-filter. However, the most recent Firefox for android still does not by default (https://caniuse.com/css-backdrop-filter). I use this approach for mobile Firefox and older browsers, in this example, I am using Bootstrap variables, (https://www.thiscodeworks.com/firefox-css-backdrop-filter-workaround-css/60facccc0c27230014227666):

/* Slightly transparent. Fallback to .9 (undefined --bs-bg-opacity) */
    .backdrop-blur {
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, .9));
    }
     
/* if backdrop support, very transparent and blurred. --bs-bg-opacity set to .5 */
    @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
      .backdrop-blur {
       --bs-bg-opacity: .5;
       -webkit-backdrop-filter: blur(20px);
       backdrop-filter: blur(20px);
      }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.