CSS blur() Function

Use the blur() function to apply a Gaussian blur to an image.

The blur() function is used with the filter property to apply a blurred effect to an image.

Here's an example:

<style>
  .filtered {
    filter: blur(3px);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Official Syntax

The official syntax of the blur() function is as follows:

Possible Values

The blur() function accepts a length value (e.g. 10px, 10vw, etc) as an argument. This argument defines the value of the standard deviation to the Gaussian function.

In other words, the argument defines how many pixels on the screen blend into each other, so a larger value will create a more pronounced blurred effect.

Negative values are not allowed.

Percentage values are not allowed.

CSS Specifications

The blur() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.