Javascript appears to be disabled. This website will not work without Javascript. Please visit enable-javascript.com for more details

Internet Explorer warning:

It appears you are using Internet Explorer. This website does not work on Internet Explorer as it relies on modern CSS3 features. Please use FireFox, Chrome or Opera. When using these filters, do keep in mind graceful fallback for legacy IE users :)

CSSFilterGenerator.com

Beta V0.9 - prerelease - working but not beautiful - more to come!
Demo Image for displaying CSS filters and mix-blend-modes
HTML:

<div class="myfilter"><img scr="my/path/to/image.jpg"></div>


CSS:

Overlay

None
Solid
Gradient
Note: It appears you are using Safari. Safari currently does not support hue, saturation, color and luminosity.
Use FireFox, Chrome or Opera to preview these effects. If you do use these modes, be sure to create Safari fallbacks.
Note:It appears you are using Edge. Edge does not support mix-blend-mode yet. Microsoft currently lists mix-blend-mode low priorty

CSS filters allow graphical effects, leveraging inbrowser post-processing of images. Create Instagram like filters with non-destructive edits and/or animated effects!
Instructions: Click and drag the order of the filters to change the filter order. Click the label to enable/disable each filter. Rollover hover to see image without filters.

Instructions:

Click and drag the order of the filters to change the filter order, and click the on/off to enable or disable the filters. Rollover hover to see image without filters.

Bookmark URL to save your filter or copy the entire URL to share your filter!

Preview Image

Or use one of the following image (click to swap).

Wild Flowers, The Dalles, Oregon The Dalles
Painted Cove, Painted Hills, Oregon The Painted Hills
Illumination Saddle, Mt Hood, Oregon Mt. Hood
Columbia Gorge, Oregon Columbia Gorge
False Summit, South Sister, Oregon South Sister
Mount McLoughlin (from Saddle Rock), Oregon Mount McLoughlin

Q: When I share my filter URL, why does it revert to the demo image?:

While already technically feasible, this isn't a planned featured (for now) to ensure some level of user-experience.

Q: Can I use Filters on Gifs, SVGs, Videos etc?:

Yes!

Q: Does this degrade gracefully:

Yes. I recommend using for IE modernizr to detect if filters are supported. Using :after overlays can simulate brightness/darkness by using a simple overlay with a transparent background. Check out the codepen below for an example of Modernizr + filters. This can be chained with SVGFilters for IE10/IE11 support as well.

See the Pen Simple CSS filter fallback by Greg Gant (@fuzzywalrus) on CodePen.

Q: Can CSS Filters be animated?

Yes, see the pen below for an example.

See the Pen Animating CSS filters by Greg Gant (@fuzzywalrus) on CodePen.

What's to come?

This project is active development and plenty-o-features are on the way. In no particular order, planned features:

Preset reordering of filters. Partial Support Browser warnings. More documentation / examples. Spiffier UI. Upload your own image. Better responsive behavior. Create an actual logo.

Recent Changes

Better responsive behavior. Swapped jQuery UI for Sortable (Better touch support) with easier dragging, and saved/shared URLs keep the order of the filters.

CSSGram Presets

Note: Presets do not reorder filters yet. Coming soon!

courtesy of CSSGram
preset 1977
1977
preset aden
aden
preset dalles
brooklyn
preset clarendon
clarendon
preset earlybird
earlybird
preset gingham
gingham
preset hudson
hudson
preset inkwell
inkwell
preset lark
lark
preset lofi
lofi
preset mayfair
mayfair
preset moon
moon
preset nashville
nashville
preset reyes
reyes
preset rise
rise
preset slumber
slumber
preset toaster
toaster
preset walden
walden
preset willow
willow
preset xpro2
xpro2

No support Partial Support Supported

What Browsers Support CSS Filters?

Rollover partial support browsers for more details. See caniuse.com for a full list.


IE
8-11

Chrome
18+

Firefox
35+

Opera
15+

Firefox (Android)
40+

Safari
6+

iOS Safari
6.1+

Android (Browser)
4.4+

Chrome Android
40+

What browsers support mix-blend-mode?

See caniuse.com for a full list.