CSS filter property

CSS filter property is used to apply effects to an HTML 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() 1

View Code

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

View Code

.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() 1

View Code

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

View Code

.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()

View Code

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

View Code

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

The CSS contrast() function, is use to adjust the constrast level of an image, its value can be specified in number or in percentage like 1 or 100%, 1.5 or 150%, 2 or 200% so no. Negative values are not allowed, default value is 1 or 100%.

Example 4: CSS filter contrast()

View Code

.contrast {
    filter: contrast(1.5);	
	transition: .8s;
}
.contrast:hover{
	filter: contrast(1);
}

View Code

.contrast{
    filter: contrast(3);
	transition: .8s;
}
.contrast:hover{
	filter: contrast(1);
}

The CSS3 drop-shadow() function, is used to apply a drop shadow effect to an element. Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);

Example 5: CSS filter drop-shadow()

View Code

.shadow {
    filter: drop-shadow(5px 5px 15px #111);
}

View Code

.shadow{
	transition: .8s;
}
.shadow:hover{
	filter: drop-shadow(5px 5px 15px #111);
}

The CSS3 hue-rotate() function, is used to apply a color rotation to an image. Syntax: filter: hue-rotate(angle);

Example 6: CSS filter hue-rotate()

View Code

.hue-rotate {
	filter: hue-rotate(90deg);
	transition: .8s;
}
.hue-rotate:hover{
	filter: hue-rotate(360deg);
}

View Code

.hue-rotate{
	filter: hue-rotate(270deg);
	transition: .8s;
}
.hue-rotate:hover{
	filter: hue-rotate(360deg);
}