Css: Workaround to backdrop-filter?

html

responsive-design

css

performance

byAlex Kataev·Jan 27, 2025

To replicate the effect of backdrop-filter: blur(), layer a blur() filtered ::before pseudo-element, absolutely positioned behind your target. Don't forget the target element's background needs to be transparent for the blur effect to come through.

.effect-behind {
  position: relative;
  background: transparent;
}

.effect-behind::before {
  content: "";
  position: absolute;
  width: 100%; /* The size of an average developer's coffee cup */
  height: 100%;
  background: inherit;
  filter: blur(10px); /* blurring, just like your vision at 2am while coding */
  z-index: -1;
}

This technique gives a similar visual vibe to a backdrop filter, blurring the content under the .effect-behind element. By adjusting blur(10px), you can control just how much you blur your vision, i.e., the blur intensity.

Navigating browser differences

The fast answer solves your problem, but what about different browsers? Here's how you can accommodate these variations and future-proof your masterpiece.

Working with @supports

Use @supports to write a more adaptive CSS code. This feature checks whether a browser can handle a particular property or value pair, allowing you to apply styles accordingly.

@supports (backdrop-filter: blur(2em)) {
  .effect-behind {
    backdrop-filter: blur(2em); /* when your browser can handle the cold */
  }
}
@supports not (backdrop-filter: blur(2em)) {
  /* why not sit by nice fallback fire */
}

On turning feature flags on

As of now, some browsers, specifically Chrome and Safari, would need flags or prefixes enabled to be able to use this feature:

Safari: -webkit-backdrop-filter
Chrome: Just enable the 'Experimental Web Platform features' flag (chrome://flags/#enable-experimental-web-platform-features).

Translucent backgrounds: subtle but effective

For those poor souls (I mean, browsers) that can't support backdrop-filter, a translucent background color will do. It won't blur the beneath content, but it sure will soften things up a bit!

.effect-behind {
  background-color: rgba(255, 255, 255, 0.5); /* R, G, B, and a little bit of secret spice */
}

Venturing with SVG filters

SVG filters can serve as a strong alternative with its ability to create complex visual effects. Just remember, with great power comes great performance hits & limitations especially for dynamic content.

Pseudo-elements to the rescue

Bring pseudo-elements into the picture to mimic the backdrop blur effect. But remember, z-index ain't just for stacking pizzas:

.effect-faux {
  position: relative;
}

.effect-faux::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(10px); /* just a tiny pinch of blur spice */
  z-index: -1;
}

Delivering that 'frosted window' look

Cool as a cucumber, eh? Let's understand this in a more visual way.

🖼️ Clear Window: The element without any filter.

🧊 Applying backdrop-filter: Blurring everything behind, just like a frosted window.

🖌️ Workaround: A semi-transparent overlay does the trick.

Before: [🏞 Clear View]
After : [🏞🔲🌫️ Frosted Overlay]

Tada! You've got your own frost-like effect without having to rely on backdrop-filter.

Strategies for pushing the envelope

How about we sprinkle some extra seasoning? Let's learn more about progressive enhancement.

Checking browser support dynamically

With JavaScript, you can check the browser support for backdrop-filter on the fly and apply an alternative blurring effect.

Preparing for the future

Regularly tune into developer doc updates and browser release notes. For instance, Chrome v76 included support for backdrop-filter as default.

Learning from practical examples

Platforms like CodePen or JSFiddle have a bunch of examples you can learn from and get your feet wet before you dive into the big leagues.

explain-codes / Html / Css: Workaround to backdrop-filter?

Linked

How can I make a CSS glass/blur effect work for an overlay?



White space visible on right side of page when background image should extend full length of page



Stretch background image CSS?



Stretch and scale CSS background



How do I remove background-image in css?



Apply style to parent if it has child with CSS



Invert CSS font-color depending on background-color



Navigating browser differences Delivering that 'frosted window' look Strategies for pushing the envelope