Image Filters

Features

• Nine stackable adjustments
• Eight one-click presets
• Live preview at full resolution
• Exports the equivalent CSS filter string
• Fully reversible, the original is never modified

How to use it

1. Drop in an image.
2. Try a preset, or adjust the sliders individually.
3. Copy the CSS if you want the effect in a stylesheet instead.
4. Download the filtered image when you are happy.

Canvas filters and the CSS equivalent

These adjustments use the canvas filter property, which accepts the same syntax as the CSS filter property. That is genuinely useful: the string this tool generates can be pasted straight into a stylesheet to apply the identical effect to a live element, without producing a modified image file at all. For a hover effect or a theme variation, that is almost always the better approach, no extra download, and it can be animated.

Filters apply in the order written, and the order changes the result. Blurring then increasing contrast produces a different image from increasing contrast then blurring, because each operation acts on the output of the previous one. This tool applies them in a fixed, sensible order; if you need a different order, edit the generated CSS string by hand.

One performance note if you use the CSS version: blur is expensive. It forces the browser to sample a wide neighbourhood of pixels for every output pixel, and animating a blur radius will drop frames on modest hardware. Animating opacity on a pre-blurred layer is far cheaper. Grayscale, sepia and hue-rotate are simple per-pixel matrix operations and are essentially free by comparison.