CssHow-ToBeginner · 3 min read

How to Use Contrast Filter in CSS: Simple Guide

Use the CSS filter property with the contrast() function to adjust the contrast of an element. For example, filter: contrast(150%); increases contrast by 50%, making colors more vivid.

📐

Syntax

The contrast() function is used inside the filter property to control the contrast level of an element.

contrast(percentage): Sets contrast relative to the original. 100% means no change.
Values < 100% reduce contrast (make image duller).
Values > 100% increase contrast (make colors stronger).

css

selector {
  filter: contrast(percentage);
}

💻

Example

This example shows an image with normal contrast and the same image with 200% contrast, making colors much stronger.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contrast Filter Example</title>
<style>
  .normal {
    filter: contrast(100%);
    width: 300px;
    margin-right: 20px;
  }
  .high-contrast {
    filter: contrast(200%);
    width: 300px;
  }
  .container {
    display: flex;
    align-items: center;
  }
</style>
</head>
<body>
  <div class="container">
    <img src="https://via.placeholder.com/300x200.png?text=Normal" alt="Normal contrast" class="normal" />
    <img src="https://via.placeholder.com/300x200.png?text=High+Contrast" alt="High contrast" class="high-contrast" />
  </div>
</body>
</html>

Output

Two side-by-side images: left image with normal colors, right image with much stronger, vivid colors due to doubled contrast.

⚠️

Common Pitfalls

Common mistakes when using the contrast filter include:

Using values without units (always use percentages like contrast(150%)).
Setting contrast too high or too low, which can make images look unnatural or lose detail.
Forgetting that filter affects the whole element, including text and backgrounds.

Also, combining multiple filters requires correct syntax with spaces between functions.

css

/* Wrong: missing percentage unit */
.element {
  filter: contrast(150); /* Incorrect, no % */
}

/* Correct: with percentage unit */
.element {
  filter: contrast(150%);
}

📊

Quick Reference

Property	Description	Example
filter	Applies graphical effects like contrast	filter: contrast(120%);
contrast(%)	Adjusts contrast level; 100% is default	contrast(80%) reduces contrast
Multiple filters	Combine with spaces	filter: contrast(150%) brightness(110%);

✅

Key Takeaways

Use filter: contrast(percentage); to adjust element contrast in CSS.

Contrast values below 100% reduce contrast; above 100% increase it.

Always include the percentage unit (%) with contrast values.

The filter affects the entire element including text and backgrounds.

Combine multiple filters by separating them with spaces inside the filter property.