Book Sale! Save 20% on all books w/ code: WP2024
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. Security Specialist. WordPress Buff.
SAC Pro: Unlimited chats.
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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
BF Sale! Save 40% on all Pro WordPress plugins and books w/ code FRIDAY23
Sincerely trying to engage more on social media. I love the people not the platforms.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.