Photo Filters

Nine presets, ten sliders, and the CSS to reuse it.

🎞️
Drop a photo here, or click to choosePNG · JPG · WebP

What each slider is really doing

Brightness scales every channel, which lifts shadows and highlights together and can wash an image out. Contrast pushes values away from mid-grey, deepening blacks and brightening whites. Saturation moves colours away from grey without touching lightness.

Hue rotates the entire colour wheel, which is a blunt instrument — small amounts warm or cool an image, large amounts turn skies purple. Sepia and grayscale both collapse colour, but sepia keeps a tone while grayscale removes it entirely.

The RGB shift

The glitch slider offsets the red channel one way and the blue channel the other, leaving green in place. That is a real artefact — misaligned colour separations in printing, or a failing video cable — which is why it reads as 'broken screen' rather than merely decorative.

It is applied per-pixel after the CSS filters, so unlike the others it cannot be expressed as a one-line CSS rule.

Reusing the look on the web

The line under the sliders is the exact CSS filter chain being applied. Copy it into a stylesheet and any element gets the same treatment — images, videos, even whole sections — with no JavaScript and no image processing at all.

Filters applied in CSS are also non-destructive: the original file is untouched, and you can change the look later by editing one line.

Frequently asked questions

Why is my downloaded image smaller than the original?

Images are capped at 1200 pixels wide for responsive preview. For full-resolution output, apply the CSS filter chain shown under the sliders in an editor that works on your original file.

Are my images uploaded?

No. Every adjustment is applied to the pixels locally, with nothing uploaded.

Something wrong with this tool, or an idea for it? Tell us