Tinkering with CSS Filters

Tinkering with CSS Filter Effects

A view of Saba, Netherlands Antilles from Sint Maarten A view of Saba, an island in the Netherlands Antilles from the Wyndham Sapphire Beach Club on Cupecoy Beach in Sint Maarten.

Filter options

blur 0px Value must be a length such as px, em, or rem.

brightness Value may be a number or percentage. Use a number here.

contrast 100% Value must be a number or a percentage.

drop-shadow

px px px

Value must be a shadow like that of box-shadow.

grayscale 0 Value must be a number between 0 and 1 or a percentage.

hue-rotate 0deg Value must be an angle, in degrees (deg) or radians (rad).

invert 0 Value must be a number between 0 and 1 or a percentage.

opacity 1 Value must be a number between 0 and 1 or a percentage.

saturate 1 Value must be a number between 0 and 1 or a percentage.

sepia 0 Value must be a number between 0 and 1 or a percentage.

About This Demo

This demo is a partial look at CSS Filter Effects. To date, they are only available unprefixed in Firefox 34+, and with the -webkit- prefix in some WebKit-based browsers.

You can use filter effects with CSS transitions too. I've used them here, as you may have noticed if you've reset the sliders.

Developed by Tiffany B. Brown. Released under a GPL license.

Show the CSS

You can copy and paste this code into your CSS. Note that you do not have to define every function, just those whose values are other than the default.