How to Blur the Background Image in CSS

For having a blurring effect use CSS filter property, which allows having effects like blur or color shifting on an element.

The blur function of the filter property adds a Gaussian blur to the input image. The value of radius specifies the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other so that a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

filter: blur(px);

To apply a blur effect to the background image, with the blur function use the z-index property to set the stack order of the element, set the width and height 100% to have a full background image. Set position property with absolute value to position the element relative to the nearest positioned ancestor.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      img.background {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
      filter: blur(5px);
      }
    </style>
  </head>
  <body>
    <h1>Blurred background</h1>
    <img class="background" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Safari 5.1 and earlier versions.</p>
  </body>
</html>

Try it Yourself »

You can also apply a blurred background image to another image. For that use see the example below:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      img.background {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
      filter: blur(10px);
      }
      img.circle {
      display: block;
      max-width: 60%;
      height: auto;
      margin: 0 auto;
      border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1>Blurred background</h1>
    <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Safari 5.1 and earlier versions.</p>
    <img class="background" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img class="circle" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>
COPY TO CLIPBOARD	 SELECT ALL

Try it Yourself »