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
How to add visual effects to images with CSS?
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
The following is the 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.
The following are the example codes to add visual effects to images with CSS −
Add a Visual Effect to Images With Invert
The invert() is used to invert the samples in an image. Here, 0% (0) is the actual image whereas the value 100% will make the invert the image completely. To invert an image in CSS3, use the invert() for the filter property.
Example
Let us see an example to add a visual effect to images with invert −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
}
img.normal{
width: 300px;
height: 300px;
}
img.filter {
width: 300px;
height: 300px;
filter: invert(100%);
}
</style>
</head>
<body>
<h1>CSS Image effects example</h1>
<img class="normal" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
<img class="filter" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
</body>
</html>
Add a Visual Effect to Images With hue Rotation
The hue rotation adjusts i.e., increase, or decrease the image hue value. To set the hue rotation of an image in CSS3, use the hue-rotate value for filter property. The hue rotation is set with a degree value i.e.
Actual Image: 0 deg i.e., default
Rotate 30 degrees: 30 deg
Rotate 90 degrees: 90 deg, etc.
Positive hue rotate: Increases the hue value
Negative hue rotate: Decreases the hue value
Example
Let us now see an example to apply hue rotation with CSS3. We will set 45 degrees with hue rotation −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
Add a Visual Effect to Images With Drop Shadow
To add the drop shadow effect to image in CSS3, use the drop-shadow value for filter property. It has the following values −
h-shadow − To specify a pixel value for the horizontal shadow.
v-shadow − To specify a pixel value for the vertical shadow. Negative values place the shadow above the image.
blur − To add a blur effect to the shadow.
spread − Positive values causes the shadow to expand and negative to shrink.
color − To add color to the shadow
Example
Let us see an example to apply the drop shadow effect to an image with drop-shadow −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</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>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Add a Visual Effect to Images With Sepia
The sepia sets the sepia effect to an image. To set the sepia effect in CSS3, use the sepia value for filter property −
Actual Image: 0%
Completely Sepia: 100%
Example
Here, we have set the sepia to 100% for the complete effect −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
Add a Visual Effect to Images With Saturation
To adjust the saturation of an image in CSS3, use the saturate value for filter property. The contrast is set with a percentage value i.e.
Unsaturated Image: 0%
Actual Image: 100% i.e., default
Super-Saturated: Set over 100%
Example
Let us see how to saturate an image with the filter property and value saturate in CSS −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: saturate(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
256 Views
