4 CSS Filters For Adjusting Color

SVG offers a non-destructive way to change some color properties of an image or graphic. Unfortunately some of those changes are more cumbersome to make than others. CSS filters allow you to non-destructively change some properties of color as well and in a less cumbersome way than SVG.

Continue reading

How To Add A Drop Shadow With A CSS Filter

Last week I began a series on CSS filters. I talked in general about the difference between CSS and SVG filters and then I showed you how to work with the former. I closed by walking you through the blur() filter-function and showed you an example using the function.

Continue reading

An Introduction To CSS Filters

Image editors gives us the ability to add all sorts of effects. You can change the colors in an image, add a blur, adjust lighting effects, and even blend multiple images together. If you’ve been working with images and graphic editors for awhile, you know to make these changes non-destructively, applying them in layers separate from the original image.

Continue reading

Add Bevel And Emboss Effects With The feConvolveMatrix Filter Primitive

I’m sure you’ve used your graphic editor to add an emboss or a bevel to some graphic element. If so you’ll probably like working with feConvolveMatrix, which can be used to do both.

Continue reading

Add Warping Or Ripping Effects With The feDisplacementMap Filter Primitive

If you like to play around with warping effects in your favorite graphic editor, you might find you you enjoy experimenting with the feDisplacementMap filter.

Continue reading