CODEWITHSUNDEEP
htmlcss
ryanafrish7
ryanafrish7

Reputation: 3410

CSS: Workaround to backdrop-filter?

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

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

Upvotes: 140

Views: 227918

Answers (10)

Sam Miller
Sam Miller

Reputation: 105

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);
      }
    }

Upvotes: 0

Cenco
Cenco

Reputation: 91

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.

Upvotes: 0

mandel99
mandel99

Reputation: 124

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>

Upvotes: 4

Krono
Krono

Reputation: 1362

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.

Upvotes: 95

Duvrai
Duvrai

Reputation: 3458

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

Upvotes: 155

jestin-g
jestin-g

Reputation: 41

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)

Upvotes: 2

Mason Freed
Mason Freed

Reputation: 7931

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.

Upvotes: 22

Alvin Novian
Alvin Novian

Reputation: 191

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.

Upvotes: 3

Ahmed
Ahmed

Reputation: 626

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.

Upvotes: 14

B&#225;lint
B&#225;lint

Reputation: 4039

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.

Upvotes: 0

Related Questions