CSS filter property

The CSS filter property applies graphical effects such as color shifting, blurring, or brightness adjustment to HTML elements. It is a CSS3 feature commonly used to enhance the visual presentation of images, backgrounds, and other elements before they are displayed on the screen.

Note: The filter property is part of the CSS3 specification.

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

The CSS filter property can be used to apply a grayscale effect to an image. The grayscale() function accepts a value between 0% and 100%, where 0% represents the original image (no effect) and 100% renders the image completely in grayscale. The default value is 0%.

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);
}

The CSS filter property can be used to apply a blur effect to an image. The blur() function accepts a value in pixels (px) that defines the radius of the blur. The default value is 0, which means no blur is applied.

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);
}

The CSS filter property can be used to adjust the brightness of an image. The brightness() function accepts a percentage value, where 100% represents the original brightness and 0% makes the image completely dark.

Example 3: CSS filter brightness() 1

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

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);
}