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.

Filter effects in action

Play with the various sliders to apply filter effects to the image below.

Properties

• backdrop-filter
• filter

Functions

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

Guides

Using CSS filter effects

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.

Related concepts

• <image> data type

• <filter-function> data type

• background-image CSS property

• background-blend-mode CSS property

• mix-blend-mode CSS property

• interpolation glossary term

• color-interpolation-filters SVG property

Specifications

See also

• Properties in the CSS compositing and blending module enable blending an element's background layers together and blending an element with its container
• The SVG <filter> element and the SVG filter primitives: <feSpotLight>, <feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>, <feGaussianBlur>, <feImage>, <feMerge>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>