CSS: The Definitive Guide, 5th Edition

Chapter 20. Filters, Blending, Clipping, and Masking

Several special properties allow authors to alter the appearance of elements with visual filters, specify different ways to visually blend elements with whatever is behind them, and alter the presentation of elements by showing parts and hiding other parts. While these may seem like disparate concepts, they all share one thing in common: they allow elements to be altered in ways that were previously difficult or impossible.

CSS Filters

CSS provides a way to apply built-in visual filter effects, as well as custom filters defined in the page or in external files, to elements by way of the filter property.

filter

Values	[ none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url() ]#
Initial value	none
Applies to	All elements (in SVG, applies to all graphics elements and all container elements except the <defs> element)
Computed value	As declared
Inherited	No
Animatable	Yes

The value syntax permits a space-separated list of filter functions, with each filter applied in sequence. Thus, given the declaration filter: opacity(0.5) blur(1px);, the opacity is applied to the element, and the semitransparent result is then blurred. If the order is reversed, so too is the order of application: the fully opaque element is blurred, and the resulting blur made semitransparent.

The CSS specification talks of “input images” when discussing filter ...