Achieving backdrop blur without 'backdrop-filter'

Updated Apr 2025

Hi everyone!

At the time of writing* it's rather popular to go for a "glass look" in your designs. Having been around in the web design space long enough to have known (and used) frames (the horror!), I feel like I've been ahead of the curve on this one. I've been favouring glass-style designs since I could poke around in MS Frontpage.

* (as of the latest update, this trend still persists)

Anyway, that's not the point of this post. As you can tell by the title, I'm going to be focusing on a rather exciting, and no longer new as of this update—CSS property: backdrop-filter:, specifically using the function blur().

The above example uses backdrop-filter: blur(8px).

With the trend of using "glass"/"glass-look" in UI design, having a blurry backdrop on your page elements is all the rave.

BUT! There's something you should know before you dive in.

It's still *not* supported everywhere!

When I first wrote this article, the issue was with Firefox, since the then-latest Firefox release didn't support the backdrop-filter: property in any context (without turning on some features in about:config). What I didn't know at the time, but I know now, is that this feature is also not supported out the box in WebKit, as it requires a -webkit- prefix, and even then, results may vary.

By now, users on the web are probably using either Google Chrome or a derivative of its open-source cousin, Chromium, but we should still consider those who are not. Why? Well, let's just say without appropriate blurring, glass can be a bit... disappointing:

Okay, I admit, this isn't ugly enough. But trust me, it can get ugly. In fact, if the backdrop-filter property doesn't render well, it can be even worse, especially for performance.

Why do we blur anyway?

In case it's not obvious, using glass-look comes with some tradeoffs. I won't list a bunch of them here, but I will point out the one that should be most obvious: readability.

Without an appropriately contrasted background, text is hard to read. This is especially true for visually impaired readers, such as yours truly (I'm nearsighted and have a mild astigmatism, but I can also fly and shoot lasers from my eyes, so who's counting?).

So, blurring your glassy element(s)' background(s) can be more than just a matter of aesthetics. I'd recommend also making appropriate use of text-shadows if you're going to go for a glass-look, but that's another topic for another time.

Do we have an alternative solution?

Yes! Fortunately, we can rely on something that's well-supported in almost all browsers, except Internet Erase- um... drat! I meant to say, Internet Explorer!

Pseudo-Elements and filters to the rescue!

Now, I must point out that this solution is not perfect. It can be a little slower, at least on older systems, or if used poorly. However, it gives, in my opinion, acceptable, sometimes more realistic, results.

To achieve this solution, you'll need to understand four things: pseudo-elements, positioning, filters, and the z-index.

How does it work?

On the surface, this may all sound like a lot, but it's not as complicated as it sounds. In fact, I've covered this before (see method #2).

• Pseudo-elements: You'll need at least one to act as the "physical filter" which will blur your element(s)' background(s) for you.
• Positioning: You'll need to position your pseudo-element absolutely within its parent in order to get this to work.
• Filters: The real hard work, in both this method and the much simpler backdrop-filter: property, is done by filters, which are CSS functions that affect images of any kind, whether they are image elements, or backgrounds. backdrop-filter: simplifies our workflow by allowing us to directly apply these filters to the background of any element, which is something we couldn't do in the past. We can achieve the same level of versatility with the method mentioned here.
• z-index: Unless you're aiming for some kind of reveal animation, you'll probably want your backdrop to actually be a backdrop, and this means you need to understand how the z-index works. To keep it simple, your pseudo-elements will need a property: value; pair of z-index: -1;.

Demo Source Code

To start, I've removed backdrop-filter: blur(8px); from the parent div, added position: relative; and a ::before pseudo-element with the following properties:

div::before {
  background-color: rgb(235, 235, 235);
  content: '';
  position: absolute;
  inset: 3%;
  z-index: -1;
}

Note: inset is shorthand for top, bottom, right, and left, but not supported in Internet Exploder [sic]. Not that it matters anyway, because Internet Eradicator [sic] does not support normal CSS filters either. All Internet Explorer jokes aside, you probably still can use this method with Internet Explorer, if you are willing to find its non-standard filter syntax.

I would, but I don't have a copy of IE to test on, so I will not cover it here.

Now that we know how our backdrop looks, we can blur it, and turn up the opacity. To do this, we'll add filter: blur(); and change rgb() to rgba(), as follows:

div::before {
  background-color: rgba(235, 235, 235, .3);
  content: '';
  filter: blur(18px);
  position: absolute;
  inset: 3%;
  z-index: -1;
}

This should give us a result that looks like this:

If you're not satisfied, you can further tweak your values. For instance, I've gone for a darker background, but with more space around the edges:

div::before {
  background-color: rgba(35, 35, 35, 1);
  content: '';
  filter: blur(18px);
  position: absolute;
  inset: 10%;
  z-index: -1;
}

Additional benefits:

While this method is more technically complicated than dropping in a single property: value; pair, it's FAR more versatile, apart from being better supported across different browsers. Both solutions can be animated, but this method gives you more options, and can be pretty smooth if done correctly. It has the added benefit of being a slightly softer performance hit on some devices as well.

You can see it in action below, on an older version of my portfolio.

I hope you've found this tutorial useful. You can follow me on here, or on YouTube for more CSS and Design tips, tricks, and guides.

Enjoy, and go out and create!