The CSS contrast() function is a powerful tool for adjusting the visual intensity of elements by modifying the difference between light and dark areas. Unlike filters that only adjust brightness or saturation, contrast() affects both lightness and color vibrancy while preserving the original hue. This makes it ideal for creating dramatic visual effects or toning down overly bright images. Below, we answer common questions about using this filter effectively.
What does the CSS contrast() filter function do?
The contrast() filter increases or decreases the contrast of an element. When you apply it, colors either become more vivid and distinct (higher contrast) or fade toward a uniform gray (lower contrast). It works by mathematically adjusting each RGB channel: it multiplies the channel value by the specified amount and then adds a correction factor to maintain brightness balance. At 100% (or 1), the element remains unchanged. At 0% (or 0), the entire element turns completely gray, losing all color distinction. Values above 100% amplify the difference between light and dark areas, making edges sharper and colors more saturated. This behavior sets it apart from similar filters like saturate(), which only affects color intensity, or brightness(), which only adjusts overall lightness.
How do you use contrast() with different units—percentages versus numbers?
The contrast() function accepts either a percentage (%) or a decimal number (<number>) as its argument. The two are equivalent: contrast(0.5) works exactly like contrast(50%). Both produce the same visual result—50% of the original contrast. For clarity, many developers prefer percentages when describing the level of contrast, but numbers are equally valid and common in CSS variable scenarios. The syntax is straightforward: filter: contrast(<amount>); where <amount> is either a number (like 1.2) or a percentage (like 120%). Remember: a value of 1 or 100% leaves the element unchanged; 0 or 0% makes it completely gray; values over 1 or 100% increase contrast linearly.
What are the valid argument values for contrast() and what do they do?
The only valid argument is a positive number (including 0) or a positive percentage. Negative values are ignored and have no effect—the filter simply does not apply. If you omit the argument entirely, the default value is applied, which leaves the element unchanged (equivalent to contrast(1)). Typical ranges:
- 0 or 0%: Complete gray, no contrast.
- 0.5 or 50%: Half contrast, muted appearance.
- 1 or 100%: No change, normal contrast.
- 1.5 or 150%: 1.5× contrast, colors pop more.
- 2 or 200%: Double contrast, very sharp.
Can you use negative values with contrast()? What about no argument?
No, negative values are not allowed in the contrast() function. If you pass a negative number like -1.5, the filter will not have any effect—the element retains its original appearance. The specification defines the argument as optional: if you omit it, the function defaults to 1 (i.e., no change). So filter: contrast(); is equivalent to filter: contrast(1); and leaves the element untouched. This behavior is consistent across all modern browsers. For a more flexible approach, you can combine contrast() with CSS variables to dynamically control the amount without worrying about invalid inputs.
How does contrast() affect colors compared to other filter functions?
The contrast() filter operates on RGB math differently than brightness() or saturate(). While brightness() only adjusts overall lightness (making everything brighter or darker) and saturate() only modifies color intensity (vibrancy), contrast() affects both simultaneously. It works by scaling each RGB channel by the given amount and then adding a bias of 255 * (0.5 - 0.5 * amount). This preserves the hue of each color but changes both its lightness and saturation. For example, at 200% contrast, red becomes more red (channel values spread further from the midpoint), while at 0% contrast, all colors converge to a neutral gray (all channels equal). This makes contrast() a more holistic tool for visual adjustments, especially useful for images where you want to enhance definition without altering the basic color relationships.
Which CSS properties can contrast() be used with?
The contrast() function is compatible with two CSS properties: filter and backdrop-filter. You apply it as a value to these properties using the standard syntax, e.g., filter: contrast(150%);. The filter property applies the effect to the element itself, while backdrop-filter applies it to the area behind the element (useful for glassmorphism effects). Note that contrast() cannot be used with properties like opacity or mix-blend-mode—it is strictly a filter function. When using backdrop-filter, contrast() can blend with background content to create interesting depth effects. The function is defined in the Filter Effects Module Level 1 specification, ensuring broad browser support.
How does contrast() work with CSS variables?
CSS variables (custom properties) integrate seamlessly with contrast(), allowing dynamic control over the filter value. For example: --filter-amount: 200%; filter: contrast(var(--filter-amount));. You can change the variable with JavaScript or media queries to create responsive effects. The variable must contain a valid contrast() argument—either a number or a percentage. Invalid values (like negative numbers) will cause the property to fail and be ignored, so it's best to validate the variable. Using variables makes it easy to reuse the same contrast level across multiple elements or to animate the filter by transitioning the custom property. This approach is especially powerful in design systems where you can centralize visual adjustments.