Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Adjusting the Image Contrast using CSS3
The CSS filter property allows you to apply visual effects to HTML elements, including adjusting image contrast. The contrast() function specifically controls the contrast level of images, making them appear more or less vibrant.
Syntax
selector {
filter: contrast(value);
}
Possible Values
| Value | Description |
|---|---|
0% |
Completely gray image (no contrast) |
100% |
Original image contrast (default) |
>100% |
Increased contrast |
<100% |
Decreased contrast |
Example 1: High Contrast (200%)
The following example increases the image contrast to 200% for a more vibrant appearance −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
margin: 20px;
}
.high-contrast {
filter: contrast(200%);
}
img {
width: 150px;
height: 150px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div>
<h3>Original Image</h3>
<img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Original">
</div>
<div>
<h3>High Contrast (200%)</h3>
<img class="high-contrast" src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL High Contrast">
</div>
</div>
</body>
</html>
Two images are displayed side by side: the original MySQL logo and the same logo with significantly enhanced contrast, appearing more vibrant and defined.
Example 2: Low Contrast (50%)
This example demonstrates reduced contrast at 50%, creating a softer, muted appearance −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
margin: 20px;
}
.low-contrast {
filter: contrast(50%);
}
img {
width: 150px;
height: 150px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div>
<h3>Original Image</h3>
<img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Original">
</div>
<div>
<h3>Low Contrast (50%)</h3>
<img class="low-contrast" src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Low Contrast">
</div>
</div>
</body>
</html>
Two images are displayed: the original MySQL logo and the same logo with reduced contrast, appearing softer and less defined with muted colors.
Example 3: No Contrast (0%)
Setting contrast to 0% creates a completely gray image with no color differentiation −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
margin: 20px;
}
.no-contrast {
filter: contrast(0%);
}
img {
width: 150px;
height: 150px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div>
<h3>Original Image</h3>
<img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Original">
</div>
<div>
<h3>No Contrast (0%)</h3>
<img class="no-contrast" src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL No Contrast">
</div>
</div>
</body>
</html>
Two images are displayed: the original colorful MySQL logo and a completely gray version with no visible contrast or color differentiation.
Conclusion
The CSS filter: contrast() property provides precise control over image contrast levels. Use values below 100% for softer images, 100% for original appearance, and above 100% for enhanced contrast effects.
Updated on: 2026-03-15T13:42:12+05:30
5K+ Views
Advertisements