DEV Community

Cover image for CSS Blurry Background Image
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

And then for the blur we add the following extra:

filter: blur(8px);
-webkit-filter: blur(8px);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

CSS Filter support

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

Top comments (0)