The properties in the CSS filter effects module let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.
Play with the various sliders to apply filter effects to the image below:
To see the code for this filter effects sample, view the source on Github.
Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions.
<image> data type<filter-function> data typebackground-image CSS propertybackground-blend-mode CSS propertymix-blend-mode CSS propertycolor-interpolation-filters SVG property| Specification |
|---|
| Filter Effects Module Level 2 |
| Filter Effects Module Level 1 |
<filter> element and the SVG filter primitives, including <feSpotLight>, <feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>, <feGaussianBlur>, <feImage>, <feMerge>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, and <feTurbulence>.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Filter_Effects