FILTER CSS

Filter

CSS property

We forget all the time this property, but it is an excellent one ! see some examples :

When you have a navbar, you can stylise it really simply with blur

Home Contact About login

If you want to create some effects, like disabled buttons with grayscale, contrast, opacity

Click

Click

Click

Click

You can also with brightness do effect when you are hover

Put your mouse hover

However, you can have strange things, like hue-rotate, saturate or invert

Sepia can make good images

But one of my favorite is the drop-shadow. I recommand that to use only with SVG or PNG. Look at why :