filter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

The filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element.

Note: As a presentation attribute, filter also has a CSS property counterpart: filter. When both are specified, the CSS property takes priority.

Technically, filter can be applied to any element, but it only has effect on container elements without the <defs> element, all graphics elements, and the <use> element.

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>