CSS Blurry Background Image

In this tutorial, we will learn how to blur a background image. It is easy to achieve 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 blur your images in all browsers but IE and Opera Mini.

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