Filter

blur()

A Gaussian blur. The length is the blur radius (the standard deviation); larger values blur more. Percentages are not allowed, and the default is 0.

.glass { background: rgb(255 255 255 / 0.4); backdrop-filter: blur(12px); }

drop-shadow()

A shadow that follows the shape of the element's visible pixels, including transparent areas of images and text, rather than its rectangular box. It takes an optional colour, x and y offsets and an optional blur radius.

Unlike box-shadow, it has no spread value and no inset keyword. The colour defaults to currentcolor.

img.logo { filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3)); }

brightness()

Scales the brightness linearly. 0 gives black, 1 (or 100%) leaves the colours unchanged, and larger values brighten. The default is 1.

contrast()

Adjusts contrast. 0 gives flat grey, 1 leaves the colours unchanged, and larger values increase contrast. The default is 1.

grayscale()

Converts towards greyscale. 1 (the default) is fully grey and 0 leaves the colours unchanged; values above 1 are clamped to 1.

img { filter: grayscale(1); transition: filter 0.3s; }
img:hover { filter: none; }

hue-rotate()

Rotates every colour's hue around the colour wheel by an angle. 0deg (the default) and 360deg leave colours unchanged.

invert()

Inverts the colours. 1 (the default) is fully inverted, 0 leaves colours unchanged, and 0.5 gives flat grey. Values above 1 are clamped.

opacity()

Makes the element more transparent. 1 (the default) leaves it opaque and 0 makes it fully transparent. It has the same effect as the opacity property, but can be combined with other filters in one list.

saturate()

Adjusts colour saturation. 0 removes all colour, 1 (the default) leaves it unchanged, and larger values oversaturate.

sepia()

Converts towards a warm brown sepia tone. 1 (the default) is fully sepia and 0 leaves colours unchanged; values above 1 are clamped.