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
X	12	53	35	40	9.1
Tablets / Mobile
53	53	35	41	9.3	6.0

Last updated by CSSPortal on: 1st December 2019