filterBaseline · Widely available

The filter CSS property applies one or more graphic effects to an element. You can use filter functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, filter: blur(2px).

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 7, 2016. Widely available since Mar 7, 2019.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–52Not supported

53+Supportedsince Aug 31, 2016

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–34Not supported

35+Supportedsince Jan 13, 2015

Current: 157

Safari

1–9Not supported

9.1+Supportedsince Mar 21, 2016

Current: 27

MobileChrome Android

18–52Not supported

53+Supportedsince Sep 7, 2016

Current: 155

Firefox Android

4–34Not supported

35+Supportedsince Jan 13, 2015

Current: 157

Safari iOS

1–9Not supported

9.3+Supportedsince Mar 21, 2016

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: filter.

Feature detection

CSS · check before using

@supports (filter: initial) {
  /* styles that rely on filter */
}

/* or in JavaScript */
if (CSS.supports("filter", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#propdef-filter ↗

Usage share

caniuse.com/css-filters ↗

Sub-features

Support for each part of the feature (22). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
filter	53	12	35	9.1	53	35	9.3
filter.blur	53	12	35	9.1	53	35	9.3
filter.brightness	53	12	35	9.1	53	35	9.3
filter.contrast	53	12	35	9.1	53	35	9.3
filter.drop-shadow	53	12	35	9.1	53	35	9.3
filter.grayscale	53	12	35	9.1	53	35	9.3
filter.hue-rotate	53	12	35	9.1	53	35	9.3
filter.invert	53	12	35	9.1	53	35	9.3
filter.opacity	53	12	35	9.1	53	35	9.3
filter.saturate	53	12	35	9.1	53	35	9.3
filter.sepia	53	12	35	9.1	53	35	9.3
<filter-function>	18	12	35	6	53	35	6
<filter-function>.blur	18	12	35	6	53	35	6
<filter-function>.brightness	18	12	35	6	53	35	6
<filter-function>.contrast	18	12	35	6	53	35	6
<filter-function>.drop-shadow	18	12	35	6	53	35	6
<filter-function>.grayscale	18	12	35	6	53	35	6
<filter-function>.hue-rotate	18	12	35	6	53	35	6
<filter-function>.invert	18	12	35	6	53	35	6
<filter-function>.opacity	18	12	35	6	53	35	6

Show 2 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
<filter-function>.saturate	18	12	35	6	53	35	6
<filter-function>.sepia	18	12	35	6	53	35	6