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
• Multiple filters
• Filter shorthand
• Visual examples
• Browser support

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');
	}

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.

• CSS-Tricks Almanac — includes CodePen examples that you can play with
• MDN Web Docs — image examples for each of the filter functions

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.

• Can I use: CSS property: filter
• Can I use: CSS Filter Effects

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.