CSS Filters To Adjust Brightness, Contrast, Opacity, And Inversion

Have you ever added an image to a website only to realize it would look better if it was a little brighter? Maybe the image could use more contrast or a bit of transparency. How about inverting all the colors to their complementary hues?

Continue reading

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