Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Darken an Image Using CSS
To darken an image using CSS, we will be discussing three different approaches. In this article, we will understand how to apply a darkening effect to an image using CSS properties and methods such as overlaying a semi-transparent layer.
We are having an image in this article, our task is to darken the image using CSS. We will be displaying the image before and after darkening.
Approaches to Darken an Image Using CSS
Here is a list of approaches to darken an image using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Darken Image Using filter Property
- Darken Image Using opacity Property
- Darken Image Using linear-gradient Overlay
Darken Image Using filter Property
To darken an image using CSS, we will be using filter property to adjust the brightness of the image.
- We have used img tag twice, to insert the image and to display the darkened image.
- Then, we have set the dimension of output image using CSS height and width property.
- We have used "filter: brightness(50%);" to set the brightness value of image using filter property which darkens the image.
Example
Here is a complete example code implementing above mentioned steps to darken an Image using CSS filter property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
filter: brightness(50%);
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>filter
</strong>property to darken an Image using
CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/https/www.tutorialspoint.com/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Darken Image Using opacity Property
In this approach, to darken an image using CSS, we will be using ::after pseudo-element for creating an overlay which darkens the image. The ::after pseudo-element adds a layer on top of the image.
- We have used "position: relative;" in class darken-image so that overlay will be positioned relative to the parent div rather than the entire page.
- We have used "position: absolute;" in the ::after pseudo-element so that overlay is placed on image covering entire image be setting CSS properties of top, left, height and width.
- We have used ""background-color: black" with opacity which together creates a darkening overlay on image.
Example
Here is a complete example code implementing above mentioned steps to darken an Image using CSS opacity property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
position: relative;
display: inline-block;
}
.darken-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>opacity
</strong> property with background-color to
darken the image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/https/www.tutorialspoint.com/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Darken Image Using linear-gradient Overlay
In this approach, we will be using linear-gradient for creating an overlay which darkens the image.
- We have used darken-image class which creates an black overlay effect with 0.5 opacity using CSS linear-gradient and rgba properties.
- The url places the image behind the the linear linear-gradient.
- At end, we have set the dimension of darkened image using CSS height and width properties.
Example
Here is a complete example code implementing above mentioned steps to darken an Image using linear-gradient overlay.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("/https/www.tutorialspoint.com/html/images/test.png");
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>background
-image</strong> with linear-gradient to darken
the Image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/https/www.tutorialspoint.com/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image"></div>
</body>
</html>
Conclusion
To darken an image using CSS, in this article, we have understood three different approaches which are by using CSS filter property, using opacity property and using linear-gradient overlay.
20K+ Views
