Blurring a background with CSS3
1st Dec 2022 | Florian Matthias Egerer

For a long time, background blur or gaussian blur, has been basically impossible to implement on web applications, giving developers a constant excuse and designers a constant heartache. In this sad world, web developers hated user interface designers that proposed an UI concept, featuring a background blur, simply because they knew it was impossible to implement or terribly complicated to achieve.

To blur or not to blur?

In the year 2018, silently and without much notice, something very important changed. In came the backdrop-filter and with its release, everything would be very different. Let's call it a revolution. Today, a few years later, all major browsers support the property, making the dreams of many user interface experts come true. Finally the nerve-racking discussions are a thing of the past. We just blur it.

Here’s how to create a background blur in CSS3 using a backdrop-filter, in one simple line of code:

backdrop-filter: blur(5px);

What is a backdrop-filter?

According to MDN: “The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.”

In simple words, the experts at Mozilla Developer Network are saying, that blurring a background in development or production, works in exactly the same way as it would in your design tool of choice like, Figma, Photoshop, Illustrator, Sketch, Adobe XD or Framer. That's simply awesome and offers exciting new possibilities for user interfaces and user expierence design.

Simple example blur

Let’s make a simple example. Start by creating a <div> with a class of .background

<div class="background"></div>

Alright, let’s take a well deserved coffee and banana nut muffin break. Dust yourself off and then add some CSS to the .background class. We’ll add a lovely background-image of some pineapples and make it cover the whole page. Now let’s add the blur. We’re going to quietly sneak inside that <div> with the class of .background and gently place a div, with the class of .blur

We’ll make our .blur class cover the entire height of the window, but only half of the width, so that we can see the difference after the filter is applied. If you want the blur to have a color, you’ll need to add the background property with an rgba value. Make sure that opacity() is less than 1, so we can see through the color. Then we’ll add the magical backdrop-filter CSS property and give it a value of blur(8px)

Adding multiple filters

If you want to add multiple backdrop-filter properties to an element, just separate them with spaces. Be careful though, they may not play together nicely. Clearly, you can get very creative with these options. The team behing the background-filter property has done an outstanding job. In the name of all user interface designers alive, we want to say thank you. You made our dreams come true!

The property has been experimental for a while, so make sure to check browser compatibility. As of writing this, MDN says every major browser, except for Internet Explorer, supports the property. You might consider writing a fallback solution or simply ignoring the legacy.

Thank you for reading. Have a blurry day! 💎