Photo filters and adjustments in your browser
Quick corrections — a little more brightness, stronger colours, a black-and-white version — should not require installing an editor. This image filters tool offers eight adjustments and eight presets, previews them instantly and saves the edited photo at full resolution.
Image filters and adjustments explained
- Brightness (0–200%): multiplies every pixel; 100% leaves the image unchanged.
- Contrast (0–200%): spreads values away from or towards mid-grey.
- Saturation (0–300%): 0% removes colour, values above 100% intensify it.
- Grayscale and sepia (0–100%): blend towards black-and-white or warm brown tones.
- Hue rotate (−180° to 180°): shifts all colours around the colour wheel.
- Invert (0–100%): creates a negative.
- Blur (0–20 px): softens the image, e.g. for backgrounds behind text.
Worked example: rescuing a dark photo
An underexposed indoor photo is the most common job for these sliders. Because brightness multiplies every pixel, it also pushes the light areas up, and anything that goes past the maximum is clipped to pure white:
pixel value 90 × 1.30 = 117 (shadows lifted)
pixel value 210 × 1.30 = 273 → 255 (highlight clipped, detail lost)A gentler route is brightness around 115%, then contrast at 105–110% to restore depth, and a small saturation boost (110%) because darker photos tend to look dull. Watch windows, lamps and white shirts in the preview; if they turn into flat white areas, lower brightness again. When you reuse the printed CSS on a website, keep the functions in the same order, because CSS applies filters from left to right and a different order can give a different result.
What you see is what you download
The colour adjustments are computed pixel by pixel with the same matrices the CSS Filter Effects specification defines, so the downloaded file matches the preview exactly and does not depend on browser support for canvas filters. For speed, the preview works on a scaled copy of large photos; the download is always processed at full size.
Use the same effect in CSS
Under the sliders the tool prints the CSS equivalent, for example:
filter: contrast(115%) grayscale(100%);Apply it to an <img> when you want to keep the original file and style it on the page instead — for instance greyscale logos that turn colourful on hover. The CSS filter generator is built for exactly that workflow.
Tips
For black-and-white photos, add a little contrast (110–120%) so they do not look flat. Keep saturation boosts moderate, as skin tones turn orange quickly. After editing, shrink the file with the image compressor.
Presets
The presets are starting points you can refine: Black & white (grayscale with extra contrast), Vintage (sepia, softer contrast, lower saturation), Vivid (more saturation and contrast), Cool and Warm (small hue and saturation shifts), Faded (low contrast, lifted brightness) and Negative. Original resets every slider. After applying a preset, move individual sliders to fine-tune it.
Privacy
Everything happens locally in your browser with JavaScript and the Canvas API. Your images are never uploaded to our servers, so the tool also works with confidential screenshots and personal photos.