CSS filters are employed to apply visual enhancements to text, images, and various elements of a web page. The CSS filter attribute provides a way to manipulate effects like color adjustments or blurring, altering the appearance of an element prior to its presentation on the screen.
The syntax of CSS filter property is given below.
Syntax
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();
Let's explore the values of properties with an illustration.
brightness
As the name suggests, this function adjusts the luminosity of an element. A setting of 0% corresponds to total darkness, while 100% brightness reflects the initial state. Values exceeding 100% can result in even brighter outcomes.
We can comprehend this concept by referring to the subsequent diagram.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: brightness(130%);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2>brightness(130%)</h2>
</body>
</html>
blur
It is employed to implement the blur effect on the element. In case the blur value is unspecified, the default value of 0 is utilized. The parameter within the blur property does not support percentage values. Increasing its value results in a greater blur effect.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(2px);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2>blur(2px)</h2>
</body>
</html>
invert
It is employed to reverse the samples within the input image. A value of 100% indicates a complete inversion, while a value of 0% maintains the original input unchanged. Negative values are not permitted in this operation.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: invert(60);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2>invert(60)</h2>
</body>
</html>
saturate
It establishes the saturation level of a particular element. A saturation of 0% signifies an entirely unsaturated element, while 100% saturation indicates the original state. Values exceeding 100% are permissible, yielding super-saturated outcomes. Negative values are not applicable to this attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: saturate(40);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2>saturate(40)</h2>
</body>
</html>
drop-shadow
It implements the drop-shadow impact on the provided image. It allows for the following parameters: horizontal shadow, vertical shadow, blur radius, spread radius, and color.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: drop-shadow(10px 20px 30px yellow);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> drop-shadow(10px 20px 30px yellow);</h2>
</body>
</html>
contrast
It modifies the difference in brightness of the input. A 0% setting will result in a fully black image, while a 100% setting retains the original input unchanged. Values exceeding 100% can also be used to produce outcomes with reduced contrast.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: contrast(50%);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> contrast(50%)</h2>
</body>
</html>
opacity
It is applied to introduce transparency to the input image. A value of 0% signifies complete transparency, while a value of 100% signifies the original image, which is fully opaque.
Let's understand it by an illustration.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: opacity(40%);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> opacity(40%)</h2>
</body>
</html>
hue-rotate
It executes a color rotation on the input image. The boundary value specifies the amount of degrees around the color wheel that the image will be rotated. By default, it is set to 0 degrees, indicating the original image. The upper limit for this value is 360 degrees.
Let's understand it by an illustration.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: hue-rotate(240deg);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> hue-rotate(240deg)</h2>
</body>
</html>
grayscale
It transforms the input image into monochrome. 0% grayscale corresponds to the original image, while 100% signifies a fully grayscale version. The process maps the colors of the object to 256 different shades of gray.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: grayscale(80%);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> grayscale(80%)</h2>
</body>
</html>
sepia
It is employed to convert the image into a sepia-toned image. A 0% value signifies the original image, while a 100% value represents a fully sepia-toned image.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: sepia(90%);
}
</style>
</head>
<body>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" > <h2>Original Image </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "img1"> <h2> sepia(90%)</h2>
</body>
</html>