back to top

Image effects with CSS function filter

20170425 33a0850 nr 001

The CSS function filter is a great way to realize image effects with CSS (Cascading Style Sheets)1). 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

Above you see the original photo.

The following CSS instruction darkens the image by 20%:

img {
   filter: brightness(80%);
}
20170425 33a0850 nr 001
The brightness of the image is reduced by 20% (100% no change).

This code converts a color image into a grayscale image:

img {
   filter: grayscale(100%);
}
20170425 33a0850 nr 001
The photo in black-and white.

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

img {
   filter: blur(3px);
}
20170425 33a0850 nr 001
An blurred photo works well as a text background.

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

img {
   filter: contrast(150%) brightness(50%) sepia(100%) hue-rotate(170deg);
}
20170425 33a0850 nr 001

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%)

Leave a Reply

Your email address will not be published. Required fields are marked *