Image Filter Editor

What the image Filter Editor does

This editor exposes the eight adjustments built into the browser's own filter engine, applied to a canvas so the result can be saved as a file. Because it uses the same implementation that powers the CSS filter property, what you see here is exactly what a browser would render — and the tool gives you the equivalent CSS string so you can choose which way to apply it.

That choice matters more than it sounds. Applying a filter in CSS costs no file size, can be animated, and can be undone by changing one line. Baking it into the image is permanent but travels — it survives being emailed, posted to a platform that strips CSS, or opened in software that knows nothing about the web. Use CSS when the image lives on a page you control; bake it in when the file has to stand on its own.

A few of the sliders deserve a note. Saturation above 100% is the fastest way to make a flat photo look worse — it clips skin tones to orange long before it makes anything look vivid. Hue rotation shifts every colour around the wheel together, which is striking on graphics and disastrous on faces. Blur is measured in pixels of the displayed image, so the same value looks much stronger on a small image than a large one.

The presets are starting points rather than looks in themselves. Punchy raises contrast and saturation slightly, which suits a flat phone photo. Faded film lifts the blacks and drops saturation. Noir is full desaturation with heavy contrast. Load one and then adjust — every image needs different numbers.

How to use it

1. Load an image and try a preset to get in the right area.
2. Adjust individual sliders. Small moves — a photo rarely needs more than 10–15% of anything.
3. Compare against the original panel on the left as you go.
4. Either copy the CSS to apply it on a web page, or download the baked-in PNG.

A worked example

A flat, slightly underexposed phone photo, corrected:

filter: brightness(108%) contrast(118%) saturate(112%);

Three small moves, none more than 18%. Compare that with what the Punchy preset does at its default settings and then pushed too far:

Saturation clips: once a channel hits 255 it cannot go further, so detail in that colour is gone permanently. That is why the second row loses the texture in red clothing while the greens still look fine.

Frequently asked questions