Image effects with CSS function filter

The CSS function filter is a great way to realize image effects with CSS (Cascading Style Sheets)¹⁾. You can set contrast, brightness, saturation and much more in CSS, similar to an image editing program. The image is not edited in any way, all changes are done in the CSS.

1) CSS is the formatting for HTML

In this way one can achieve pretty effects. I use this property on this website for the post images. When the mouse is moved over the image (hover), the image darkens by 20%.

Some examples

The following CSS instruction darkens the image by 20%:

img {
   filter: brightness(80%);
}

This code converts a color image into a grayscale image:

img {
   filter: grayscale(100%);
}

You can also blur the image, which is perfect to use it as a background for text.

img {
   filter: blur(3px);
}

It is also possible to combine several filters. E.g. to simulate a night shot

img {
   filter: contrast(150%) brightness(40%) sepia(100%) hue-rotate(170deg);
}

Explanation: I have increased the contrast so that the monochrome, darkened (brightness) image does not look dull. Since there is no color information (and thus saturation = 0) in a black and white image, I use the filter sepia instead of grayscale. With hue-rotation the color value is shifted to blue.

Alle Filter:

filter: brightness(100%)

filter: saturation(100%)

filter: contrast(0%)

filter: hue-rotate(0deg)

filter: opacitiy(100%)

filter: blur(0px)

filter: grayscale(0%)

filter: drop-shadow(h-shadow v-shadow blur spread color)
   h-shadow: Shadow horizontal (px)
   v-shadow: Shadow vertical (px)
   blur: blur in px
   spread: spread in px
   color: in hex, hsv(a), rgb(a)

filter: invert(0%)

filter: sepia(0%)