CSS blur() function

Definition and usage

CSS blur() The filter function applies a blur effect to the element. The larger the value, the stronger the blur effect.

If a value is not specified, the default is 0.

Example

Example 1

Apply different blur effects to <h1> and <img> elements:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Try it yourself

Example 2

Create a blurred background:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Try it yourself

CSS syntax

blur(radius)

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Reference:CSS filter attribute

Reference:CSS brightness() function

Reference:CSS contrast() function

Reference:CSS drop-shadow() function

Reference:CSS grayscale() function

Reference:CSS hue-rotate() function

Reference:CSS invert() function

Reference:CSS opacity() function

Reference:CSS saturate() function

Reference:CSS sepia() function