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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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
>
<
img
src
=
alt
=
"Geeks image"
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
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-