CSS | filter Property
The filter property is used to set the visual effect of an element. This property is mostly used in image content.
Syntax:
filter: none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()| url();
Note: More then one filter can be added to the HTML element.
Example:
img {
filter: brightness(20%) blur(20px);
}This example applying two filter function to the image element in a webpage.
Filter function:
- none: It is the default value and it does not apply any effect.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: none;}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- brightness(): It sets the brightness of the element. If the brightness is 0% then it is completely black and if the brightness is 100% then it is same as original. The values greater than 100% result is brighter elements.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: brightness(10%);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- grayscale(): It converts the element colors into black and white. The grayscale 0% indicates the original element and 100% indicate completely grayscale element.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: grayscale(70%);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- sepia(): It converts the image into sepia image where 0% represents the original image and 100% represents completely sepia.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: sepia(50);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- contrast() It helps to adjust the contrast of the element. The 0% contrast indicate complete black element and 100% contrast indicate original element.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: contrast(50);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- saturate(): It is used to set saturation of element. The 0% saturate indicate element completely unsaturated and 100% saturate indicate the original image. The value greater than 100% result is super-saturated element.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: saturate(50);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- blur(): It applies blur effect to the element. If blur value is not specified then it takes 0 as default value.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: blur(5px);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- opacity(): It sets the opacity effect of the image. The 0% opacity indicate the element is completely transparent and if opacity is 100% then it indicate the original image.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: opacity(0.5);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- hue-rotate(): It applies a hue rotation to the image. The value defines the number of degrees around the color circle the image samples will be adjusted. The default value is 0 degree and it represents the original image.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: hue-rotate(45deg);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- invert(): It inverts the element. The default value is 0% and it represents the original image. The 100% makes the image completely inverted.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: invert(50);}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- drop-shadow(): It applies a drop shadow effect to the element. It accepts h-shadow, v-shadow, blur, spread and color as values.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
- initial: It sets the filter property to its default value.
Example:
<!DOCTYPE html><html><head><title>CSS filter property</title><style>img {filter: initial();}</style></head><body><div><imgsrc=alt="Geeks image"></div></body></html>Output:
Supported Browsers: The browsers supported by filter property are listed below:
- Google Chrome 53.0, 18.0 -webkit-
- Internet Explorer 13.0
- Firefox 35.0
- Safari 9.1, 6.0 -webkit-
- Opera 40.0, 15.0 -webkit-
