blur() CSS Function

Description

The blur() CSS function sets the Gaussian blur of images, background images, or text. Blur cannot be directly applied to the element, only to its descendants.

Syntax

blur() = blur( <length>? )

Values

  • lengthIt defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of 0 leaves the image unchanged.

Example

<img class="blur-me" src="images/nature.jpg" alt="Blur Example">
.blur-me {
filter: blur(5px);
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019