blur()
======

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

Try it
------

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 \*/
```

SVG filter
----------

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

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`