Understanding the CSS3 Filter Functions

CSS Web Development Front End Technology

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 −

Contrast

To set image contrast in CSS, use filter contrast(%). 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 with more contrast.

Example

Let us now see an example to adjust image contrast with CSS3 −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(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 and has more contrast 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>

Output

Drop Shadow

To add drop shadow 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 now see another example −

Live Demo

<!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>

Output

Sepia Effect

To apply sepia effect to images using CSS3, use the sepia value for filter property. The code is as follows −

Example

Live Demo

<!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>