blur()
The blur()
CSS function applies a Gaussian blur to the input image. Its result is a {{cssxref("<filter-function>")}}
.
{{InteractiveExample("CSS Demo: blur()")}}
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Syntax
blur() /* No effect */
blur(0) /* No effect */
blur(8px) /* Blur with 8px radius */
blur(1.17rem) /* Blur with 1.17rem radius */
Parameters
{{cssxref("length")}}
{{Optional_Inline}}
- : Specifies the radius of the blur. It defines the value of the standard deviation to the Gaussian function, that is, how many pixels on the screen blend into each other. Therefore, a larger value will create more blur. A value of
0
leaves the input unchanged. The initial value for{{Glossary("interpolation")}}
is0
. Percentage values are invalid. The default value is0
.
- : Specifies the radius of the blur. It defines the value of the standard deviation to the Gaussian function, that is, how many pixels on the screen blend into each other. Therefore, a larger value will create more blur. A value of
SVG filter
The SVG {{SVGElement("feGaussianBlur")}}
filter element can also be used to blur content. The filter’s {{SVGAttr("stdDeviation")}}
attribute accepts up to two values enabling creating more complex blur values. To create an equivalent blur, we include one value for stdDeviation
. This SVG effect can then be referenced by ID:
<svg role="none">
<filter id="blur11">
<feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
</filter>
</svg>
The following declarations produce the same effect:
filter: blur(1.1px);
filter: url("#blur11"); /* with embedded SVG */
filter: url("folder/fileName.svg#blur11"); /* external svg filter definition */
Formal syntax
{{CSSSyntax}}
Examples
This example shows three images: the image with a blur()
filter function applied, the image with the equivalent SVG blur function applied, and the original images for comparison:
.filter {
filter: blur(3.5px);
}
<svg role="img" aria-label="Flag">
<filter id="blur">
<feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
</filter>
<image
href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
filter="url('#blur')" />
</svg>
svg:not([height]) {
display: none;
}
<table cellpadding="5">
<thead>
<tr>
<th>Live example</th>
<th>SVG Equivalent</th>
<th>Original image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img
class="filter"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</td>
<td>
<svg id="svg" height="220" width="220" overflow="visible">
<filter id="svgBlur">
<feGaussianBlur stdDeviation="3.5" />
</filter>
<image
href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
filter="url('#svgBlur')" />
</svg>
</td>
<td>
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</td>
</tr>
</tbody>
</table>
{{EmbedLiveSample('blur','100%','280')}}
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}
See also
- CSS filter effects module
- The other
{{cssxref("<filter-function>")}}
functions available to be used in values of the{{cssxref("filter")}}
and{{cssxref("backdrop-filter")}}
properties include:{{cssxref("filter-function/brightness", "brightness()")}}
{{cssxref("filter-function/contrast", "contrast()")}}
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
{{cssxref("filter-function/grayscale", "grayscale()")}}
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
{{cssxref("filter-function/invert", "invert()")}}
{{cssxref("filter-function/opacity", "opacity()")}}
{{cssxref("filter-function/saturate", "saturate()")}}
{{cssxref("filter-function/sepia", "sepia()")}}