DEV Community

Mian Azan
Mian Azan

Posted on

CSS FILTER PROPERTY

๐‚๐’๐’ ๐œ๐š๐ง ๐›๐ž ๐ฎ๐ฌ๐ž๐ ๐ญ๐จ ๐š๐ฉ๐ฉ๐ฅ๐ฒ ๐š ๐Ÿ๐ข๐ฅ๐ญ๐ž๐ซ ๐ญ๐จ ๐ฒ๐จ๐ฎ๐ซ ๐ข๐ฆ๐š๐ ๐ž๐Ÿ˜Ž.

The ๐’‡๐’Š๐’๐’•๐’†๐’“ ๐’‘๐’“๐’๐’‘๐’†๐’“๐’•๐’š gives items visual effects. It has predefined functions like blur, brightness, contrast, hue, and sepia, as well as the ability to create custom SVG filters.
As a result, you may easily tweak the attributes' values to make your image more appealing. Here is the demonstration for the same.

Image description

Blur

Applies a Gaussian blur to the input image. The value of โ€˜radiusโ€™ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

.img{
filter:blur(8px);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Brightness

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the โ€œamountโ€ parameter is missing, a value of 100% is used.

.img{
filter:brightness(1.5);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Contrast

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values over the amount over 100% are allowed, providing results with less contrast. If the โ€œamountโ€ parameter is missing, a value of 100% is used.

 img{
filter:contrast(250%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Hue Rotate

Applies a hue rotation on the input image. The value of โ€œangleโ€ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the โ€œangleโ€ parameter is missing, a value of 0deg is used. The maximum value is 360deg.

.img{
filter:hue-rotate(60deg);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Invert

Inverts the samples in the input image. The value of โ€œamountโ€ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the โ€œamountโ€ parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:invert(85%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Saturate

Saturates the input image. The value of โ€œamountโ€ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values over 100% are allowed, providing super-saturated results. If the โ€œamountโ€ parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:saturate(50%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Sepia

Converts the input image to sepia. The value of โ€œamountโ€ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the โ€œamountโ€ parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:sepia(80%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Multiple Filters

.img{

filter:hue-rotate(70deg);
filter:saturate(145%);
filter:brightness(145%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

The CSS filter property provides access to effects like blur or color shifting on an elementโ€™s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

Discussion (2)

Collapse
lico profile image
SeongKuk Han

So cool! Thanks for sharing!

Collapse
mianazanfarooq profile image
Mian Azan Author

Glad to hear that article helped you