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
Understanding the CSS3 Filter Functions
The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions.
Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
As you can see above, with the filter property, we can set the following effects: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, and url.
Invert
The invert() function is used to invert the color samples in an image. Here, 0% (or 0) represents the original image whereas 100% will completely invert the image colors.
Example
Let us see an example to add invert effect to images −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 20px;
margin: 20px;
}
img {
width: 200px;
height: 150px;
border: 2px solid #ddd;
}
.inverted {
filter: invert(100%);
}
</style>
</head>
<body>
<h3>Original vs Inverted Image</h3>
<div class="image-container">
<div>
<p>Original</p>
<img src="/python/images/python-mini-logo.jpg" alt="Python Logo">
</div>
<div>
<p>Inverted</p>
<img class="inverted" src="/python/images/python-mini-logo.jpg" alt="Inverted Python Logo">
</div>
</div>
</body>
</html>
Two images appear side by side: the original Python logo and an inverted version where all colors are reversed (blues become oranges, whites become blacks, etc.).
Contrast
To set image contrast in CSS, use filter: contrast(). The value 0% makes the image completely gray, 100% is the original image (default), and values above 100% increase contrast.
Example
Let us now see an example to adjust image contrast −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 20px;
margin: 20px;
}
img {
width: 160px;
height: 150px;
border: 2px solid #ddd;
}
.high-contrast {
filter: contrast(150%);
}
</style>
</head>
<body>
<h3>Normal vs High Contrast</h3>
<div class="image-container">
<div>
<p>Normal Contrast</p>
<img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Logo">
</div>
<div>
<p>High Contrast (150%)</p>
<img class="high-contrast" src="/mysql/images/mysql-mini-logo.jpg" alt="High Contrast MySQL Logo">
</div>
</div>
</body>
</html>
Two MySQL logos appear: the original image and a high-contrast version where the colors appear more vibrant and pronounced.
Blur
The blur() function applies a blur effect to an image. The larger the value (in pixels), the more blurred the image becomes.
Example
The following example creates a blurry background image −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
font-family: Arial, sans-serif;
}
.blur-background {
background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
filter: blur(8px);
height: 100%;
background-position: center;
background-size: cover;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 10px;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<div class="blur-background"></div>
<div class="overlay-text">
<h2>Blurred Background Effect</h2>
<p>The background image is blurred while text remains sharp</p>
</div>
</body>
</html>
A webpage with a blurred background image and a centered white text box with sharp, readable text overlaid on top.
Drop Shadow
The drop-shadow() function adds a shadow effect to an image. It accepts parameters for horizontal offset, vertical offset, blur radius, and color.
Example
Let us see an example of drop shadow effect −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 30px;
margin: 20px;
align-items: center;
}
img {
width: 160px;
height: 150px;
}
.shadow-effect {
filter: drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<h3>Drop Shadow Effect</h3>
<div class="image-container">
<div>
<p>Original</p>
<img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Logo">
</div>
<div>
<p>With Drop Shadow</p>
<img class="shadow-effect" src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL Logo with Shadow">
</div>
</div>
</body>
</html>
Two MySQL logos: the original and one with a dark shadow offset 8px to the right and down, creating a depth effect.
Sepia Effect
The sepia() function applies a warm, brownish tone to images, creating a vintage photo effect. Values range from 0% (original) to 100% (full sepia).
Example
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 20px;
margin: 20px;
}
img {
width: 160px;
height: 150px;
border: 2px solid #ddd;
}
.sepia-effect {
filter: sepia(100%);
}
</style>
</head>
<body>
<h3>Sepia Effect Example</h3>
<div class="image-container">
<div>
<p>Original</p>
<img src="/spring/images/spring-mini-logo.jpg" alt="Spring Logo">
</div>
<div>
<p>Sepia Effect</p>
<img class="sepia-effect" src="/spring/images/spring-mini-logo.jpg" alt="Sepia Spring Logo">
</div>
</div>
</body>
</html>
Two Spring Framework logos: the original colorful version and a sepia-toned version with warm brown tones, resembling an old photograph.
Hue Rotation
The hue-rotate() function adjusts the hue of an image by rotating colors around the color wheel. The value is specified in degrees (0deg to 360deg).
Example
Let us see an example with 120 degrees hue rotation −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 20px;
margin: 20px;
}
img {
width: 160px;
height: 150px;
border: 2px solid #ddd;
}
.hue-rotated {
filter: hue-rotate(120deg);
}
</style>
</head>
<body>
<h3>Hue Rotation Example</h3>
<div class="image-container">
<div>
<p>Original</p>
<img src="/spring/images/spring-mini-logo.jpg" alt="Spring Logo">
</div>
<div>
<p>Hue Rotated (120deg)</p>
<img class="hue-rotated" src="/spring/images/spring-mini-logo.jpg" alt="Hue Rotated Spring Logo">
</div>
</div>
</body>
</html>
Two Spring logos: the original with green colors and a hue-rotated version where the green tones have shifted to different colors on the spectrum (likely purple/magenta tones).
Conclusion
CSS3 filter functions provide powerful tools for applying visual effects to images and elements. These functions can be combined and adjusted to create unique visual experiences without requiring image editing software.
246 Views
