Every CSS Filter Function Explained: The Complete Reference

blur()

filter: blur(5px); — applies a Gaussian blur. The value is a length (pixels), not a percentage. Default: 0px (no blur).

brightness()

filter: brightness(150%); — scales luminance. 100% is unchanged, 0% is fully black, values above 100% brighten further. Default: 100%.

contrast()

filter: contrast(200%); — adjusts the difference between light and dark areas. 100% is normal, 0% produces flat gray, higher values sharpen contrast. Default: 100%.

grayscale()

filter: grayscale(100%); — converts toward black and white. 0% is fully color, 100% is fully grayscale. Default: 0%.

hue-rotate()

filter: hue-rotate(90deg); — rotates all colors around the color wheel by the specified angle. Default: 0deg.

invert()

filter: invert(100%); — inverts the colors. 100% is a full negative-image inversion. Default: 0%.

opacity()

filter: opacity(50%); — adjusts transparency, functioning similarly to the standalone opacity property. Default: 100%.

saturate()

filter: saturate(200%); — controls color intensity. 0% is fully desaturated (gray), 100% is normal, higher values produce vivid, oversaturated color. Default: 100%.

sepia()

filter: sepia(80%); — applies a warm, brownish vintage-photo tone. Default: 0%.

drop-shadow()

filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5)); — adds a shadow that follows the element's actual visible alpha shape (transparent PNG areas are respected), unlike box-shadow, which always uses the rectangular bounding box.

Combining Functions

filter: contrast(175%) brightness(103%) saturate(120%);

Multiple functions are space-separated in a single declaration and apply in order, left to right, each acting on the output of the one before it.