HTML5 and CSS3, 2nd Edition

Filter Effects

CSS filter effects let us perform graphics operations on elements as they’re inserted into the document.^[92] We can do Gaussian blurs, specular lighting, merging, compositing, and many other things that we used to have to turn to graphical editors for.

This specification is pretty far away, and only WebKit-based browsers like Chrome and Safari support some of these filters. Specifically, in WebKit browsers we can use the following filter effects:

blur blur(10px);

Blurs the image, using a blur size in pixels.

grayscale grayscale(0.5);

Removes the color from an image, using values from 0 to 1, where 0 is full color and 1 is grayscale. We can also specify the value as a percentage.

drop-shadow drop-shadow(5px 5px 5px #333)

Gives ...