CSS filter
The CSS filter effects developed in CSS3 that you can use to perform visual effect operations like color or blur, balancing contrast or brightness, color saturation, etc. On graphical effects elements like an image before it is drawn onto the web page.
Syntax:
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();
brightness():
If the brightness is 0%, will create an image that is completely black, whereas 100% brightness represents the original one.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: brightness(150%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>brightness(150%)</h2>
</body>
</html>
OUTPUT:
blur():
The blur function accepts CSS length value as a parameter which defines the blur radius. A larger value will create more blur. If no parameter is provided, then a value zero is used.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(3px);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>blur(3px)</h2>
</body>
</html>
OUTPUT:
invert():
Its 100% value provides completely inverted, and 0% values leave the unchanged input. Negative values are not allowed in it.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: invert(80);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>invert(80)</h2>
</body>
</html>
OUTPUT:
saturate():
The 0% saturation provides the completely unsaturated element, whereas the 100% saturation provides the original one. The values greater than 100% are allowed that provides super-saturated results. We cannot use negative values with this property.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: saturate(30);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>saturate(30)</h2>
</body>
</html>
OUTPUT:
drop-shadow():
The values it accepts are h-shadow, v-shadow, blur, spread, and color.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: drop-shadow(10px 20px 30px red);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> drop-shadow(10px 20px 30px yellow);</h2>
</body>
</html>
OUTPUT:
contrast():
The 0% value will create a completely black image, whereas the 100% values leave the unchanged input,
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: contrast(50%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> contrast(50%)</h2>
</body>
</html>
OUTPUT:
opacity():
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: opacity(40%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> opacity(40%)</h2>
</body>
</html>
OUTPUT:
hue-rotate():
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 = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> hue-rotate(240deg)</h2>
</body>
</html>
OUTPUT:
grayscale():
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: grayscale(80%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> grayscale(80%)</h2>
</body>
</html>
OUTPUT:
sepia():
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: sepia(90%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> sepia(90%)</h2>
</body>
</html>
OUTPUT:
