CSS Blurry Background Image

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

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

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

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

Thank you for reading, and let's connect!

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