CSS Kenpai 🍻

Wondrous CSS filters

They are awesome

CSS filters have too many possibilities and the reason why is because CSS filters can use SVG filters as well, and this makes them so much powerful.
Filters are mostly misunderstood as properties only to change some colors or give some blurry effect, but they are so much more than that! Let's see them in action.

What are they? #

In a nutshell, they are a bunch of functions applied with the filter property, to change things like opacity, brightness, contrast and also apply some cool masks like sepia, which you will see later on in this article!

See the Pen Filters and Nostalgia by Rishav (@Rj456) on CodePen.

That was me and my father :) . Okay,getting back to filters...

The filter property can have these functions as values, other than initial, inherit and none :

Some of these are self-explanatory, like blur, brightness, grayscale,opacity, etc. But let's look at each of them.
So the original image looks like this:

Starry Night

blur() #

Takes a length value, like px, em, rem as the radius for the gaussian blur applied to the element.

blur

brightness() #

Takes numbers and percentages as arguments. Percentages more than 100% brighten the image, and less than 100% darkens it. Play with it and you'll understand better.

brightness

saturate() #

Saturation defines the intensity of the colors in an image.
This function saturates/desaturates the image, takes a number or a percentage and values greater than 100% saturates the image, and less than 100% desaturates it.

saturate

hue-rotate() #

Yep, you guessed it right. This function rotates the hue of the element, and takes values in "angles".

hue rotate

Let's just assume now that all of these functions take either numbers, angles or percentages as arguments, and filter the elements accordingly.

contrast() #

Changes the contrast of an image, takes numbers or percentages as inputs.

contrast

invert() #

invert

drop-shadow() #

This one is like the elder brother of box-shadow. box-shadow always gives us a rectangular shadow, but if we want a shadow which feels real, we can use this filter. Hover on the SVG to see the effect.

See the Pen drop-shadow() by Rishav (@Rj456) on CodePen.

grayscale() #

grayscale

opacity() #

opacity

sepia() #

sepia

url() #

This is one function which gives greater power to our CSS filters, as this takes the url of an SVG Filter which is a compelety different topic, and not in the scope of this article. But, just understand that it applies SVG filters by getting a url to the SVG file, or the ID of the inline SVG filter in HTML. It brings in many possibilities.

See the Pen filter demo 2 by Rishav (@Rj456) on CodePen.

Animating filters #

They are animatable, so you can do this:

See the Pen Animated Filters by Rishav (@Rj456) on CodePen.

So that is all for CSS filters, they are relatively new, and as IE is gone (sigh), support is good enough.