CSS Blurry Background Image

— 3 minute read

permalink

Today we are going to look into making a background image look blurry. It is easy to achieve in CSS.

Let's get started!

HTML Structure permalink

We are going to create two divs next to each other, one with a blurred image and one with a normal one.

<div class="container flex">
<div class="blur flex">
<span>BLUR</span>
</div>
<div class="no-blur flex">
<span>NO-BLUR</span>
</div>
</div>

Nothing fancy, just a container and two divs with a span inside.

Do note the span will also become blurry in this setup!

CSS Blur Filter permalink

For the container part, we use flex box centering.

And for the divs, we make them both 50% width and 100% height.

This is going to be the no-blur one:

.no-blur {
background: url('https://images.unsplash.com/photo-1591775995956-a6c811374d9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')
no-repeat center center;
background-size: cover;
width: 50%;
height: 100%;
}

And then for the blur we add the following extra:

filter: blur(8px);
-webkit-filter: blur(8px);

This compiles into the following code:

.blur {
background: url('https://images.unsplash.com/photo-1591803452190-8f1455681025?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')
no-repeat center center;
background-size: cover;
width: 50%;
height: 100%;
filter: blur(8px);
-webkit-filter: blur(8px);
}

You can play around with the blur levels in this Codepen.

See the Pen CSS Blurry Background Image by Chris Bongers (@rebelchris) on CodePen.

Browser Support permalink

This is sadly enough not the best-supported CSS function, but still very nice to use as the extra spice on your website.

CSS Filter support

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter