Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

All CSS Filter Functions + Quick Copy/Paste Examples

CSS makes it easy to customize image appearance on the fly. So you don’t have to crank open your image editor and do any work there. You can apply many visual effects directly on the image using the CSS filter property. You can change image brightness, contrast, opacity, saturation — even do things like rotate hues, drop shadows, and blur the image. Browser support is solid for all major browsers.

Contents

All the filters

The beauty of CSS filter is that the function names are all pretty much self-explanatory. If you’re familiar with CSS and maybe basic image editing, here are some ready-to-go example snippets just copy/paste and customize as desired.

img { filter: blur(3px); }

img { filter: brightness(50%); }

img { filter: contrast(25%); }

img { filter: drop-shadow(3px 3px 3px #777); }

img { filter: grayscale(30%); }

img { filter: hue-rotate(130deg); }

img { filter: invert(30%); }

img { filter: opacity(30%); }

img { filter: saturate(130%); }

img { filter: sepia(30%); }

img { filter: url('/path/image.svg#element-id'); }

img { filter: none; } /* remove existing filters */

Multiple filters

You can apply multiple filters to any image. For example apply all 11 filters to all .crazy images.

.crazy {
	filter: blur(3px);
	filter: brightness(50%);
	filter: contrast(25%);
	filter: drop-shadow(3px 3px 3px #777);
	filter: grayscale(30%);
	filter: hue-rotate(130deg);
	filter: invert(30%);
	filter: opacity(30%);
	filter: saturate(130%);
	filter: sepia(30%);
	filter: url('/path/image.svg#element-id');
	}

Update: What am I thinking. The above example does not apply all filters, but rather the last filter property will override all previous filters. Because that’s how CSS works: it cascades. To apply multiple filters to a selector, use the next technique.

Filter shorthand

You can use shorthand syntax to combine filter functions. Separate multiple function names with a space. Here are all 11 filters combined into one property.

.all {
	filter: blur(3px) brightness(50%) contrast(25%) drop-shadow(3px 3px 3px #777) grayscale(30%) hue-rotate(130deg) invert(30%) opacity(30%) saturate(130%) sepia(30%) url('/path/image.svg#element-id');
	}
Note: Most of the percent % values also can be written as decimals, e.g., brightness(0.4) is the same as brightness(40%).
Custom filter? Supposedly there is an additional filter function named custom(), but there’s not much information about it so far.

Visual examples

So what do these filters look like when applied to images? Rather than reinvent the wheel here, which would take more time than I have available, here are some great places to check out examples of images with all the various filters applied.

Browser support

All good news. CSS filter has solid support across browsers (excluding IE if that even still counts as a browser). Check out caniuse.com for detailed information on browser support for filter and its related functions.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Blackhole Pro: Trap bad bots in a virtual black hole.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Thoughts
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Nice collection of free SEO APIs and user-agent lookups for Googlebot, Bingbot, Applebot, YandexBot, and more.
90% of online customer support is just explaining how to do basic troubleshooting.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.