title | slug | page-type | browser-compat |
---|---|---|---|
blur() |
Web/CSS/filter-function/blur |
css-function |
css.types.filter-function.blur |
{{CSSRef}}
The blur()
CSS function applies a Gaussian blur to the input image. Its result is a {{cssxref("<filter-function>")}}.
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
The blur()
function applies a Gaussian blur to the elements on which it is applied.
blur(radius)
radius
- : The radius of the blur, specified as a {{cssxref("<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 {{Glossary("interpolation")}} is0
. Percentage values are invalid.
- : The radius of the blur, specified as a {{cssxref("<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
blur(0) /* No effect */
blur(8px) /* Blur with 8px radius */
blur(1.17rem) /* Blur with 1.17rem radius */
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 */
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="flag.jpg" xlink:href="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="flag.jpg" alt="Pride flag" />
</td>
<td>
<svg id="svg" height="220" width="220" style="overflow: visible">
<filter id="svgBlur">
<feGaussianBlur stdDeviation="3.5" />
</filter>
<image href="flag.jpg" xlink:href="flag.jpg" filter="url(#svgBlur)" />
</svg>
</td>
<td>
<img src="flag.jpg" alt="Pride flag" />
</td>
</tr>
</tbody>
</table>
{{EmbedLiveSample('blur','100%','280')}}
{{Specifications}}
{{Compat}}
- 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()")}}