CSS blur() Function
blur() function to apply a Gaussian blur to an image.
blur() function is used with the
filter property to apply a blurred effect to an image.
Here's an example:
The official syntax of the
blur() function is as follows:
blur() = blur( <length> )
blur() function accepts a length value (e.g.
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.
The following table provided by Caniuse.com shows the level of browser support for this feature.