Understanding the CSS contrast() Filter Function

The contrast() filter function lets you adjust the difference between light and dark parts of an element with a single value. It belongs to the CSS filter effects family and can be used directly on the filter property or with backdrop-filter. When applied, it modifies the RGB channels of each pixel, shifting them toward or away from a middle gray depending on the supplied amount.

The syntax is straightforward: filter: contrast(); where can be a number or a percentage. A value of 1 (or 100%) leaves the appearance unchanged. Values below 1 reduce contrast, pushing colors toward gray, while values above 1 increase contrast, making lights lighter and darks darker. Negative values are not permitted, but the function accepts CSS variables, enabling dynamic adjustments via custom properties.

Mathematically, contrast() multiplies each red, green, and blue channel by the amount and then adds 255 * (0.5 - 0.5 * amount) to the result. This operation preserves the hue while altering saturation and lightness. For example, an amount of 0.5 shifts every pixel halfway toward gray, producing a muted look, whereas an amount of 1.5 amplifies the distance from gray, yielding a more vivid image.

Practical uses include softening busy background images to improve text legibility and enhancing interactive elements on hover. A common pattern is to lower contrast and brightness on a hero image so white or dark text remains readable. Conversely, increasing contrast on a product card image when the user hovers can draw attention, especially when combined with a slight scale transform.

Browser support for contrast() is strong across modern Chrome, Firefox, Safari, and Edge browsers. The function is defined in the Filter Effects Module Level 1 specification, and no vendor prefixes are required. For further reading, see the MDN documentation on filter effects and the CSS-Tricks almanac entry for filter.