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

The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:

© 2005–2023 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