CSS function filter

Image effects with CSS function filter

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%);
}
CSS function filter
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%);
}
CSS function filter
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);
}
CSS function filter
A 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(40%) sepia(100%) hue-rotate(170deg);
}
CSS function filter

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

I'm a Night Owl

🦉

But no matter if you are a night owl or an early bird: Fill the form and receive email updates from me!

From time to time I will send you notifications for new posts.

Leave a Reply

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