CSS filter property

CSS filter property is used to apply effects to an element. Filter is CSS3 property, which is commonly used to render images, background.

 filter: none|grayscale()|blur()|brightness()|contrast()|drop-shadow()|hue-rotate()|invert()|opacity()|saturate()|sepia();

CSS Filter property, converts the image in to grayscale, default value is 0%, value of 100% is completely grayscale.

Example 1: CSS filter grayscale

.grayscale {
    filter: grayscale(50%);
}

.grayscale {
    filter: grayscale(100%);
	transition: .8s;
}
.grayscale:hover{
	filter: grayscale(0);
}

CSS Filter property, converts the image in to blur, blur value can be given in piexel, default value is 0

Example 2: CSS filter blur

.blur {
    filter: blur(3px);
}

.blur {
    filter: blur(20px);
	transition: .8s;
}
.blur:hover{
	filter: blur(0);
}

CSS Filter property, converts the image in to brightness, default value is 100%, value of 0 is completely dark.

Example 3: CSS filter brightness

.brightness {
    filter: brightness(50%);
}

.brightness{
    filter: brightness(50%);
	transition: .8s;
}
.brightness:hover{
	filter: brightness(100%);
}