How to Blur the Background Image in CSS

To create a blurring effect, use the CSS filter property, which allows applying effects like blur or color shifting to an element.

The blur() function of the filter property adds a Gaussian blur to the input image. The radius value specifies the standard deviation of the Gaussian function, determining how many pixels blend together. A larger value creates more blur. If no parameter is provided, 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

Syntax

filter: blur(length);

To apply a blur effect to a background image, use the blur() function along with the z-index property to set the stack order. Set the width and height to 100% for a full background. Set the position property to absolute 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%;
      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 supported in all modern browsers.</p>
  </body>
</html>

Try it Yourself »

You can also apply a blurred background image to another image. For that, 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%;
      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 supported in all modern browsers.</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>

Try it Yourself »