blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

Syntax

The blur() function applies a Gaussian blur to the elements on which it is applied.

css

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. Percentage values are invalid.

Setting a blur with pixels and with rem

css

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

The SVG <feGaussianBlur> filter element can also be used to blur content. The filter's 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:

html

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

The following declarations produce the same effect:

css

filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */

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:

css

.filter {
  filter: blur(3.5px);
}

html

<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" style="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>

Specifications

Specification
Filter Effects Module Level 1 # funcdef-filter-blur

Browser compatibility

BCD tables only load in the browser