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 Combined filters Visual examples […]


This content originally appeared on Perishable Press and was authored by Jeff Starr

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

Combined filters

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.



This content originally appeared on Perishable Press and was authored by Jeff Starr


Print Share Comment Cite Upload Translate Updates
APA

Jeff Starr | Sciencx (2023-01-27T00:46:23+00:00) All CSS Filter Functions + Quick Copy/Paste Examples. Retrieved from https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/

MLA
" » All CSS Filter Functions + Quick Copy/Paste Examples." Jeff Starr | Sciencx - Friday January 27, 2023, https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/
HARVARD
Jeff Starr | Sciencx Friday January 27, 2023 » All CSS Filter Functions + Quick Copy/Paste Examples., viewed ,<https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/>
VANCOUVER
Jeff Starr | Sciencx - » All CSS Filter Functions + Quick Copy/Paste Examples. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/
CHICAGO
" » All CSS Filter Functions + Quick Copy/Paste Examples." Jeff Starr | Sciencx - Accessed . https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/
IEEE
" » All CSS Filter Functions + Quick Copy/Paste Examples." Jeff Starr | Sciencx [Online]. Available: https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/. [Accessed: ]
rf:citation
» All CSS Filter Functions + Quick Copy/Paste Examples | Jeff Starr | Sciencx | https://www.scien.cx/2023/01/27/all-css-filter-functions-quick-copy-paste-examples/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts