Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting the Image Brightness using CSS3
To set image brightness in CSS, use filter brightness (%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter. The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax −
Syntax
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url.
To adjust the brighthness of an image in CSS3, use the contrast value for filter property. The contrast is set with a percentage value i.e.
Black Image: 0%
Black Image: Values set below 0%
Actual Image: 100% i.e., default
Brighter: Set over 100%
Image Brightness
Let us now see an example to brighten an image with the filter property with the value brightness() −
img.demo {
filter: brightness(120%);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Image brightness set to 0%
Let us see an example when the image brightness is set to 0%. It will display a black image −
img.demo {
filter: brightness(0%);
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(0%);
}
</style>
</head>
<body>
<h1>Learn MongoDB</h1>
<img src="https://www.tutorialspoint.com/mongodb/images/mongodb-mini-logo.jpg" alt="MongoDB" width="160" height="150">
<h1>Learn MongoDB</h1>
<img class="demo" src="https://www.tutorialspoint.com/mongodb/images/mongodb-mini-logo.jpg" alt="MongoDB" width="160" height="150">
</body>
</html>
Image brightness set to 100%
Let us see an example when the image brightness is set to 100% −
img.demo {
filter: brightness(100%);
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(100%);
}
</style>
</head>
<body>
<h1>Learn Python</h1>
<img src="https://www.tutorialspoint.com/python/images/python.jpg" alt="Python" width="460" height="150">
<h1>Learn Python</h1>
<img class="demo" src="https://www.tutorialspoint.com/python/images/python.jpg" alt="Python" width="460" height="150">
</body>
</html>
15K+ Views
