How to increase & decrease Image Brightness in CSS ?
Last Updated :
31 May, 2022
In this article, we will learn about how to increase and decrease image brightness in CSS. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.
The filter property is used to set the visual effect of an element. This property is mostly used in image content for adjusting the image rendering.
Syntax:
filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Example: In the below example we will make use of filter property with none property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: none;
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
alt="Geeks image">
</div>
</body>
</html>
|
Output:
Example 2: In the below example we will increase the brightness of the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: brightness(120%);
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
alt="Geeks image">
</div>
</body>
</html>
|
Output:
Example 3: In the below example we will decrease the brightness of the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: brightness(30%);
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
alt="Geeks image">
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...