Save up to 25% on pro security plugins w/ our Security Bundle »
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.
BBQ Pro: The fastest firewall to protect your WordPress.
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 »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
Fall season almost here :)
My greatest skill on social media is the ability to simply ignore 98% and keep scrolling without interacting.
Enjoying this summer, getting some great positive energy. Refreshing and inspiring.
☀️ Pro plugin giveaway! Enter to win 1 of 4 lifetime licenses for our WordPress security plugins, including 10-site Security Bundle!
There is no end to what humans can achieve when they work together.
Excellent (and free) tool to test your site's SSL configuration.
Plugin updates! All of our free and pro plugins ready for WordPress 6.2.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.