CSS Filter
CSS Filter
CSS filter is used to apply visual effects on the images, text, and other factors of the webpage. This filter property in CSS allows us to admit the effects like blur or color, shifting on an element rendering, etc. before these elements get represented.
Syntax:
The filter property’s syntax is below.
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();
Property Values:
There are a few property values which are discussed and explained below:
invert()
It is applied to invert many samples in an input image. If we define 100% value, then it represents that it is completely inverted. If we define 0% values(default value), then it will represent the real image. It is not allowed for negative values.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Invert Property in CSS</title>
<style>
body
{
text-align: center;
}
#img
{
filter: invert(40);
}
</style>
</head>
<body>
<img src = "Lion.png" >
<h2> Real Image </h2>
<img src = "Lion.png" id = "img">
<h2> invert(40) </h2>
</body>
</html>
Output:
drop-shadow()
This value of CSS referred to an effect, i.e., drop-shadow to the various input images. It accepts several values, which are v-shadow, h-shadow, color, blur, and spread.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Drop-Shadow Property in CSS </title>
<style>
body
{
text-align: center;
}
.img
{
filter: drop-shadow(10px 20px 30px lightblue);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> drop-shadow(10px 20px 30px lightblue); </h2>
</body>
</html>
Output:
brightness()
The brightness() value can be used to apply the brightness on an element. When we set the 0% brightness, then it illustrates completely black, although the 100% brightness shows the real one. It also obtains values that are above 100% that give brighter results.
Example:
We will understand it with the help of the following example.
<!DOCTYPE html>
<html>
<head>
<title> Brightness Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: brightness(150%);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> brightness(150%) </h2>
</body>
</html>
Output:
saturate()
It sets an element’s saturation. When we place 0% saturation, then it depicts a fully saturated element, although the 100% saturation illustrates the real one. The values which are higher than the 100% are permitted that give super-saturate outcomes. We can’t use any negative value in this property.
Example:
We will understand it with the help of the following example:
<!DOCTYPE html>
<html>
<head>
<title> Saturate Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: saturate(30);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> saturate(30) </h2>
</body>
</html>
Output:
blur()
It is referred to apply a blur effect on the element. When a blur values are not described properly, then the 0 value is set as the default value. The blur() property’s parameter does not take the values in percentage. More blur can be created using its larger value.
Example:
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title> Blur Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: blur(3px);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> blur(3px) </h2>
</body>
</html>
Output:
hue-rotate()
It uses a hue-rotation value on several input image. There are some perimeter value describes the degrees number around the circle of color; then the image will efficiently be adjusted. The 0 degree is its default value, which shows the real image. 360 degrees is its maximum value.
Example:
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title> Hue-Rotate Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: hue-rotate(250deg);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> hue-rotate(250deg) </h2>
</body>
</html>
Output:
contrast()
It sets the contrast level of an input. When we define 0% value, it will make a fully black image, although after defining the 100% values, it will leave the contrast unchanged input that shows the real one. In this value type, it is allowed to use values which are greater than the 100% that provides outcome along with lesser contrasts.
Example:
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title> Contrast Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: contrast(60%);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> contrast(60%) </h2>
</body>
</html>
Output:
opacity()
It is employed to set the transparency on various input image. When we define 0% value, it indicates the completely transparent image. Although when we define 100% value, it indicates the real image that is fully opaque.
Example:
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title> Opacity Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: opacity(50%);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> opacity(50%) </h2>
</body>
</html>
Output:
grayscale()
It can convert various input image to the white and black color. When we define 0% value, it indicates the real image, although when we define 100% value, it indicates the fully grayscale image. It can transform the color of the object into 256 types of the gray.
Example:
It will more understandable by the following illustration:
<!DOCTYPE html>
<html>
<head>
<title> Grayscale Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: grayscale(70%);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> grayscale(70%) </h2>
</body>
</html>
Output:
sepia()
It is referred to convert any image into the sepia image. When we define 0% value, it shows the real image, although when we define 100% value, it illustrates the fully sepia image.
Example:
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title> Sepia Property in CSS</title>
<style>
body
{
text-align: center;
}
.img
{
filter: sepia(80%);
}
</style>
</head>
<body>
<img src= "Lion1.png"> <h2> Real Image </h2>
<img src= "Lion1.png" class= "img"> <h2> sepia(80%) </h2>
</body>
</html>
Output:
url()
The url() function gets the XML file’s location that specifies the SVG filter, then this may add an anchor element to a particular filter element.
Example:
filter: url(svg-url#element-id) ;