CSS: The Definitive Guide, 4th Edition

Chapter 19. Filters, Blending, Clipping, and Masking

Over the past decade, CSS has accumulated some interesting new features. These allow authors to alter the appearance of element 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 very difficult or impossible.

CSS Filters

The veterans among us may remember that a long time ago, Microsoft put a filter property into their CSS support, which was used to pull in DirectX visual effects. In the time since, CSS has gained a filter property of its own, and while it’s similar in concept to what Microsoft did, it isn’t really the same thing. Among other changes, CSS defines a number of built-in visual filter effects, in addition to permitting the loading of filters defined in external files.

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 comma-separated list of filter functions, with each filter applied in sequence. Thus, ...