CSS Filter Effects

Intermediate

CSS Filter Effects process an element's rendered result before it is composited into its parent. The current CSSWG Editor's Draft defines the `filter` property and a set of filter functions such as `blur()`, `brightness()`, `contrast()`, `drop-shadow()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, and `sepia()`.

This lesson owns the CSS `filter` property and its filter-function model. The Masking lesson owns clipping and masking, Compositing and Blending owns blending and compositing modes, and Transforms owns geometric transforms. Filtering changes the rendered pixels; it does not change the element's layout geometry.

Apply filters with the filter property

`filter` accepts `none` or a list of filter functions and, in the current module, can also reference an SVG filter with `url()`. The functions are applied in the order written, so changing their order can change the result.

?

Blur with blur()

`blur()` applies a Gaussian blur to the input image. Its argument is a CSS length; negative lengths are invalid, and the omitted value defaults to `0`. A larger standard deviation produces a stronger blur.

Adjust intensity and color

`brightness()` changes brightness, `contrast()` changes contrast, `saturate()` changes color saturation, `grayscale()` removes color, `sepia()` applies a sepia effect, `invert()` inverts colors, and `hue-rotate()` rotates the hue angle. The numeric and percentage grammars are defined by the Filter Effects module.

?

Create a shadow with drop-shadow()

`drop-shadow()` creates a shadow from the input image's alpha shape. Its length values describe the offset and optional blur standard deviation, and an optional color controls the shadow color. It is not the same model as `box-shadow`: the drop shadow follows the rendered image's alpha silhouette.

?

Compose filters in order

A filter value can contain multiple functions. The first function receives the source image and each following function receives the previous result. Therefore `brightness(1.2) contrast(1.1)` is not generally equivalent to `contrast(1.1) brightness(1.2)`.

?

Filtering does not become layout

Filter effects are applied after layout and positioning. A filter can expand the visual or ink overflow area, but it does not cause Flexbox, Grid, Flow, or Sizing to recompute the element's box from the filtered pixels. Filtering is therefore different from changing width, height, transforms, or layout participation.

Understand the interaction boundary

Use Masking and Clipping when you need to define what part of a rendering is visible; use Compositing and Blending when you need to combine a source with a backdrop; use Transforms when you need geometric transformation; and use Filter Effects when you need to process the rendered image itself. These mechanisms can interact, but they have different ownership and processing stages.

Summary