Table of Contents
Filter in CSS
When you develop a website, you generally come under situations where you insert many images on your web page. These images give your website a wonderful look. But, you may be required to adjust the properties of these images as per your wish. These properties may include the values like brightness, contrast, shadow, grayscale, hue, saturation, opacity etc. You can adjust these values by using filter property of CSS3. The filter property provides an easy way to apply the visual effects to the images.
The syntax of filter property is given below:
filter:filter function();
There are various functions of filter property which are shown below:
- brightness()
- contrast()
- blur()
- drop-shadow()
- grayscale()
- hue-rotate()
- opacity()
- saturate()
brightness() function of CSS filter
The brightness() provides the facility to change the brightness of an image. The 0% brightness means a complete blackness and 100% brightness leaves an image unchanged. The brightness more than 100% will make an image brighter than its normal brightness. Let us write a code to explain the concept of brightness filter in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:10px;
}
img{
height:200px;
width:200px;
}
#image1{
border:1px solid red;
filter:brightness(50%);
}
#image2{
border:1px solid red;
filter:brightness(100%);
}
#image3{
border:1px solid red;
filter:brightness(200%);
}
</style>
</head>
<body>
<h3>Brightness setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
contrast() function of CSS filter
The contrast() function provides the facility to change the contrast of an image. The 0% contrast means a complete blackness and 100% contrast leaves an image unchanged. The contrast more than 100% will make an image with more contrast than its normal contrast. Let us write a code to explain the concept of contrast filter in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:10px;
}
img{
height:200px;
width:200px;
}
#image1{
border:1px solid red;
filter:contrast(30%);
}
#image2{
border:1px solid red;
filter:contrast(100%);
}
#image3{
border:1px solid red;
filter:contrast(300%);
}
</style>
</head>
<body>
<h3>Contrast setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
blur() function of CSS filter
CSS3 provides a function namely blur() function which makes an image to look more blur or less blur as per the value you have given. The more value means more blur of an image. If no value is provided then, 0 value is used. The value is in pixels.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:10px;
}
img{
height:200px;
width:200px;
}
#image1{
border:1px solid red;
filter:blur(0px);
}
#image2{
border:1px solid red;
filter:blur(1px);
}
#image3{
border:1px solid red;
filter:blur(2px);
}
</style>
</head>
<body>
<h3>blur setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
drop-shadow() function of CSS filter
You can apply shadow to an image by using drop-shadow value of filter property in CSS. This value works in a similar fashion as box-shadow works. There are different drop shadows like v-shadow, h-shadow, blur etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:20px;
}
img{
height:200px;
width:200px;
}
#image1{
filter:drop-shadow(2px 4px 6px rgb(155, 59, 59));
}
#image2{
filter:drop-shadow(4px 6px 8px rgb(59, 180, 86));
}
#image3{
filter:drop-shadow(6px 8px 10px rgb(121, 43, 173));
}
</style>
</head>
<body>
<h3>blur setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
grayscale() function of CSS filter
This function applies to make the image looking greyish. The 0% value means no change in original image and 100% value means complete grey look. You can apply any value between 0 and 100 in percentage. You cannot apply a negative value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:20px;
}
img{
height:200px;
width:200px;
}
#image1{
filter:grayscale(0%);
}
#image2{
filter:grayscale(50%);
}
#image3{
filter:grayscale(100%);
}
</style>
</head>
<body>
<h3>grayscale setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
hue-rotate() function of CSS filter
The hue-rotate function applies a hue rotation on an image. The value should be given in degree. The 0 deg means no change and 360 deg is the maximum value which means you should use a value between 0 deg and 360 deg. If you use value more than 360 deg then, it will work in the same fashion as it works for 0 deg to 360 deg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:20px;
}
img{
height:200px;
width:200px;
}
#image1{
filter:hue-rotate(0deg);
}
#image2{
filter:hue-rotate(150deg);
}
#image3{
filter:hue-rotate(270deg);
}
</style>
</head>
<body>
<h3>hue-rotate setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
opacity() function of CSS filter
The opacity() function helps in setting transparency of an image. The value 0% means a complete transparent image and a value 100% leaves an image unchanged. Therefore, you can set value between 0% and 100%. This function is similar to opacity property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter property</title>
<style>
.container{
display:flex;
}
.image{
margin:20px;
}
img{
height:200px;
width:200px;
}
#image1{
filter:opacity(100%);
}
#image2{
filter:opacity(50%);
}
#image3{
filter:opacity(20%);
}
</style>
</head>
<body>
<h3>opacity setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>
