W3cubDocs

/CSS

blur()

The blur() CSS function applies a Gaussian blur to the input image. Its result is a <filter-function>.

Try it

Syntax

blur(radius)

Parameters

radius

The radius of the blur, specified as a <length>. It 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 input unchanged. The initial value for interpolation is 0.

Examples

Setting a blur with pixels and with rem

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
blur
18
12
35
No
15
6
4.4
53
35
14
6
6.0

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur