CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. They can be used alone or in combination with other filters. You need to use the following syntax to apply filters in CSS:

[code language="css"]
filter: <filter-function> [<filter-function>]* | none
[/code]

Now, let's go over all these filters briefly.

Brightness

This filter controls the brightness of your images. It accepts values greater than or equal to zero as its parameter. A value of 0% will give you a completely black output. Similarly, a value of 100% will give you the original image. You can specify values greater than 100% to get even brighter images. For instance, a value of 300% will make the image 3 times as bright:

[code language="css"]
img {
filter: brightness(300%);
}
[/code]

Here is a CodePen with a brightness CSS filter in action:

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

Contrast

This filter controls the contrast of your images. Just like the brightness filter, it also accepts values greater than or equal to zero. This filter controls the difference between dark and light parts of the image in CSS. Therefore, a value of 0% results in a gray image. Setting the contrast to 100% gives you the original image and any value beyond that will further increase the image contrast:

[code language="css"]
img {
filter: contrast(0%);
}
[/code]

Here is a CodePen with a contrast CSS filter in action:

See the Pen CSS Filter Example — Contrast by SitePoint (@SitePoint) on CodePen.

Grayscale

As evident from the name, this filter can help you make your images grayscale. This filter gradually converts all the colors in our images to some shade of gray. A value of 0% will have no effect on our images and a value of 100% will turn them completely grayscale. Negative values are not allowed.

[code language="css"]
img {
filter: grayscale(100%);
}
[/code]

Here is a CodePen with the grayscale CSS filter in action:

See the Pen CSS Filter Example — Grayscale by SitePoint (@SitePoint) on CodePen.

Saturate

This filter controls the saturation of colors in your images. A value of 0% will completely remove all colors from the image, while a value over 100% will make the image supersaturated. At 100%, the final result looks just like the original image. Negative values are not allowed for this filter.

[code language="css"]
img {
filter: saturate(0%);
}
[/code]

Here is a CodePen with the saturate CSS filter in action:

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Sepia

This filter adds a sepia tinge to your images like some old photographs. The amount of sepia added depends on the percentage. At 0%, the final result looks like the original image and at 100% the image will be completely sepia.

[code language="css"]
img {
filter: sepia(100%);
}
[/code]

Continue reading %CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!%

by Gajendar Singh via SitePoint