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
How to darken an Image using CSS?
To darken an image using CSS, we can apply various techniques such as adjusting brightness with filters, creating overlays with opacity, or using gradient overlays. This effect is commonly used to enhance text readability over background images or create visual emphasis.
Syntax
/* Method 1: Using filter property */
img {
filter: brightness(percentage);
}
/* Method 2: Using overlay with opacity */
.container::after {
background-color: black;
opacity: value;
}
/* Method 3: Using linear-gradient overlay */
.element {
background-image: linear-gradient(rgba(0,0,0,opacity), rgba(0,0,0,opacity)), url(image-path);
}
Method 1: Using filter Property
The CSS filter property with brightness() function directly adjusts the image brightness. Values below 100% darken the image ?
<!DOCTYPE html>
<html>
<head>
<style>
.original-image, .darkened-image {
width: 300px;
height: 200px;
margin: 10px;
display: inline-block;
}
.darkened-image img {
filter: brightness(40%);
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h3>Original Image:</h3>
<div class="original-image">
<img src="/html/images/test.png" alt="Original">
</div>
<h3>Darkened Image (40% brightness):</h3>
<div class="darkened-image">
<img src="/html/images/test.png" alt="Darkened">
</div>
</body>
</html>
Two images displayed side by side - the original image at full brightness and the second image significantly darkened with 40% brightness applied.
Method 2: Using Opacity Overlay
This method creates a semi-transparent black overlay using the ::after pseudo-element positioned over the image ?
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
display: inline-block;
margin: 10px;
}
.image-container img {
width: 300px;
height: 200px;
object-fit: cover;
}
.darkened-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
pointer-events: none;
}
</style>
</head>
<body>
<h3>Original Image:</h3>
<div class="image-container">
<img src="/html/images/test.png" alt="Original">
</div>
<h3>Darkened with Overlay:</h3>
<div class="image-container darkened-overlay">
<img src="/html/images/test.png" alt="Darkened">
</div>
</body>
</html>
Two images displayed - the original image and the second image with a 60% opaque black overlay creating a darkening effect.
Method 3: Using Linear-Gradient Overlay
This approach combines a semi-transparent gradient with the background image to create a darkening effect ?
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-overlay {
width: 300px;
height: 200px;
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("/html/images/test.png");
background-size: cover;
background-position: center;
margin: 10px;
display: inline-block;
}
.original-bg {
background-image: url("/html/images/test.png");
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h3>Original Background:</h3>
<div class="gradient-overlay original-bg"></div>
<h3>Darkened with Gradient:</h3>
<div class="gradient-overlay"></div>
</body>
</html>
Two div elements with background images - the first showing the original image and the second showing the same image with a 50% dark gradient overlay.
Comparison
| Method | Pros | Cons | Best For |
|---|---|---|---|
| Filter Property | Simple, direct control | Limited browser support for older versions | Simple darkening effects |
| Opacity Overlay | Good browser support, flexible | More complex HTML structure | Interactive hover effects |
| Linear-Gradient | Works with background images | Only for background images | Hero sections, cards |
Conclusion
CSS offers multiple approaches to darken images - the filter property for direct brightness control, overlay techniques for flexible darkening effects, and gradient overlays for background images. Choose the method that best fits your specific use case and browser support requirements.
21K+ Views
