Andreas Zettl | 14 minutes read
In CSS, there is the filter property, which is still a working draft but already entirely supported by all modern browsers.
Here you see the original versions of the images on which we apply the filters in this article.
The following sample applies a grayscale of 100% to the images.
To blur the image, you can use the blur filter. In the below sample, we use the 2px as value.
You can apply all filters in this article also on any other element. One example is to blur some text; of course, you can still copy the text, or remove the filter via the developer console of the browser.
<p style="filter: blur(2px)">Some blurred text.</p>
Some blurred text.
The brightness can also be reduced or increased with a filter.
The following sample applies a contrast of 150% to the images. On all filters where we put percentage values, you can also put decimal values.
filter: contrast(150%) or filter: contrast(1.5)
Rotate the Hue value of an image by passing a positive or negative angle.
Inverts the original color of the element by X percent.
Like any other filter, you can apply invert to any other element. If you pass no value, then the default of 100% is used.
<div style="color:black;background-color:yellow;filter:invert();">A Black Text on Yellow Background inverted by 100%</div>
Adds transparency to the image.
The below sample saturates the image by X percent.
This filter converts the original image to sepia.
You can combine any number of these filters, but you need to be aware of the order. Adding a grayscale(100%) filter at the end will always return you a gray image.
filter: saturate(150%) hue-rotate(270deg)
Here you see a sample with the wrong order, which gives you the same result as only calling grayscale(100%).
filter: hue-rotate(270deg) grayscale(100%)