Subscribe

CSS Blurry Background Image

✍️

Learn how to blur a background image with pure CSS. See code examples and explanations plus a live demo in Codepen.

11 Jun, 2020 Β· 2 min read

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

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

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

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

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.

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Bringing perspective to CSS

7 Aug, 2022 Β· 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 Β· 3 min read

Creating a 3D Cylinder shape in CSS

Join 1829 devs and subscribe to my newsletter