CSS Blurry Background Image

β€” 4 minute read

permalink

In this tutorial we are going to learn how to blur a background image. It is easy to achieve in with pure CSS.

Let's get started!

HTML Structure permalink

We are going to create two div elements next to each other. One div will show the example of the background image blur and the other will be normal.

<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 content will also look blurry in this setup!

CSS Blur Background 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 clear image:

.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 to make an image look blurry, we add the following CSS:

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

Together with the previous code, all styles compile into the following CSS:

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

See the code example live in this Codepen permalink

Play around with the blur levels to see the effect on the image.

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

Browser Support permalink

This is not the best-supported CSS function, but still very nice to use as the extra spice on your website. It will make your images blurry in all browsers but IE and Opera Mini.

CSS blur 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