CSS Filters GrayScale Sepia Saturate hue rotate invert in CSS
CSS Filters
The CSS filter property lets you apply graphical effects to an element. Some of the functions are:-
grayscale filter:-
The grayscale function converts an image to grayscale. 0% grayscale is the original image, whereas 100% makes the image completely grayscale.
Syntax:-
Its syntax is:-
< style >
element{
filter: grayscale(%);
}
< /style >
Sepia filter:-
The sepia function converts an image to a sepia. The idea behind sepia filters is that they can make black-and-white photos look a bit more eye-catching than the basic grayscale version. 0% sepia is the original image, whereas 100% converts the image to sepia completely.
Syntax:-
Its syntax is:-
< style >
element{
filter: sepia(%);
}
< /style >
saturate filter:-
The saturate function controls the color saturation of an image. 0% creates a completely unsaturated image (grayscale), whereas 100% is the original image.
Syntax:-
Its syntax is:-
< style >
element{
filter: saturate(%);
}
< /style >
hue-rotate filter:-
The hue-rotate function applies a hue rotation (based on the color circle) to an image. If the image contains red color, which is at 0 degrees on the color circle, rotating the hue by 240deg will make the red color blue.
Syntax:-
Its syntax is:-
< style >
element{
filter: hue-rotate(deg);
}
< /style >
invert filter:-
The invert function inverts the colors of an image to make dark areas bright and bright areas dark. 0%invert leaves the image unchanged, whereas 100% creates a completely inverted image that is similar to a photographic negative.
Syntax:-
Its syntax is:-
< style >
element{
filter: invert (%);
}
< /style >
Further Explanation:-
Filter | Description |
---|---|
none | Specifies no effects |
grayscale(%) | Converts the image to grayscale. |
hue-rotate(deg) | Applies a hue rotation on the image. |
invert(%) | Inverts the samples in the image. |
saturate(%) | Saturates the image. |
sepia(%) | Converts the image to sepia. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |