CSS Filter Effects

Method of applying filter effects using the `filter` property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.

W3C Working Draft: https://www.w3.org/TR/filter-effects-1/

Usage: 96.4% + 0.04% = 96.4%

Support summary

Notes

Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

  1. Supported in Firefox under the `layout.css.filters.enabled` flag.
  2. Supported in MS Edge under the "Enable CSS filter property" flag.
  3. Partial support in Firefox before version 34 only implemented the url() function of the filter property
  4. Partial support refers to supporting filter functions, but not the `url` function.

Links

Full support table

IE

5.567891011
nnnnnnn

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
n,daaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
nnnaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa,dyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
nnnnnnnnnnnnnny,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.517.618.018.118.218.318.418.5-18.726.026.126.226.326.426.527TP
nnnnny,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127131
nnnnnnnnnnny,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.517.6-17.718.018.118.218.318.418.5-18.726.026.126.226.326.426.5
nnnny,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera Mini

all
n

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4149
nnnnnnny,xy,xy

Blackberry Browser

710
ny,x

Opera Mobile

101111.111.51212.180
nnnnnny

Chrome for Android

149
y

Firefox for Android

151
y

IE Mobile

1011
nn

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.02021222324252627282930
y,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyy

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
yy

Back to list

Data copyright caniuse.com