LookOriginal
Adjusted0/8
Weight—
Change—
Adjust brightness, contrast, saturation, hue, grayscale, sepia, inversion, and blur on a photo, with a wipe handle that puts the edit directly against the original. Presets are rendered from your own picture rather than shown as generic swatches, and the exact CSS filter declaration is copyable — so the same look can be baked into a file or applied live in a stylesheet.
Step by step
01Add the picture
Drop it anywhere on the page. It is decoded locally and every adjustment is applied to a canvas in your browser — the file on disk is never modified.
02Start from a preset if one is close
Vibrant, Warm film, Noir, Soft matte, and Newsprint are not filters in the Instagram sense — each one just sets the eight sliders to a combination worth starting from. Every value stays editable afterwards.
03Tune the sliders that matter
Brightness, contrast, saturation, hue rotation, greyscale, sepia, invert, and blur. They compose in that order into a single filter string, so their effects stack rather than replacing one another.
04Export at the quality you need
JPEG at 92 by default, which suits photographs. Switch to PNG if the image has flat colour or transparency you want preserved through the edit.
Worked example
Presets here are transparent: each is a set of slider positions, printed below exactly as it is applied. Read them as recipes you can adjust rather than effects you either accept or reject.
Given
The generated filter string for two presets
Noir
brightness(108%) contrast(130%) saturate(20%) grayscale(80%)
Warm film
brightness(105%) contrast(105%) saturate(115%)
hue-rotate(-8deg) sepia(20%)Noir is not simply greyscale: it leaves a fifth of the colour and pushes contrast to 130, which is what keeps the result from looking flat. Values sitting at their neutral are left out of the string altogether, so what you see above is the complete description of the effect — nothing hidden, and nothing you cannot adjust by hand afterwards.
Before you edit
These are the same filters CSS uses
The canvas filter property takes CSS syntax, so the string driving the export is one you could paste into a stylesheet. That is a convenience worth knowing: prototype the look here, then apply it live in the browser if the image is going on a page you control.
Order matters, and it is fixed
Filters compose in sequence, so saturating after a greyscale pass has nothing left to saturate. The order here — brightness, contrast, saturation, hue, greyscale, sepia, invert, blur — is applied consistently, which is why a preset reproduces exactly rather than approximately.
Contrast is the fastest way to lose detail
Pushing contrast clips highlights to white and shadows to black, and clipped pixels cannot be recovered by pulling the slider back on the exported file. Judge it on the areas you care about — a face, a label — not on the picture as a whole.
Blur is a look, not a redaction
A blurred region is still derived from the pixels underneath and, at low radii, is sometimes reversible. If you are hiding a face, a name, or a number, crop it out or cover it — do not blur it and assume it is gone.
Every change is non-destructive until export
Adjustments live in the settings, not in the picture: reset returns the original exactly, and moving a slider back and forth costs nothing. Only the download applies them permanently, to a copy.
The image never leaves your browser
Decoding, filtering, and encoding all happen on your machine, so an unreleased photograph or an internal screenshot is safe here. The share link carries the slider positions — a look you can send to a colleague to apply to their own file.
The judgement call
Most 'this photo looks wrong' problems map to one slider. These are the pairings worth knowing.
The picture looks flat and grey
Contrast
Separates the tones. Raise it before reaching for saturation, which exaggerates colour without adding depth.
Shot indoors, everything looks orange
Hue rotate
A small negative rotation counters tungsten warmth. Large rotations turn the whole scene false — keep it under about 15 degrees.
Colours look washed out
Saturation
Raise it in small steps. Past about 140% skin tones go orange before anything else looks better.
The whole frame is too dark
Brightness
It lifts every tone equally, including the shadows. If only the shadows are blocked, lower contrast slightly as well.
A face or a plate number must be hidden
Crop instead
Blur is a visual effect, not redaction. Remove the region or cover it with a solid shape.
A blown-out sky, pure white
Nothing here
Clipped highlights carry no data to recover. That needs the raw file, not a filter.
Reference
FAQ
Set Grayscale to 100%. For a stronger, more photographic monochrome, raise Contrast to around 120–130% at the same time — the Newsprint preset does exactly that. Partial values are useful too: 60% grayscale leaves a hint of colour, which is a common editorial look.
Brightness scales every pixel value in the same direction, so the whole picture gets lighter or darker and the difference between light and dark areas is unchanged. Contrast pushes values away from the midpoint: highlights get brighter, shadows get darker, and the range between them widens. Underexposed photos usually need brightness; flat, hazy ones usually need contrast.
Yes, and that is what the CSS output block is for. The canvas and CSS filter properties share the same syntax, so the declaration shown is the one that produced the preview. Applying it to an <img> element in a stylesheet gives an identical result — useful when you want one source file rendered several ways, or a look that responds to a theme.
The filter itself works at full resolution and does not resample anything. What can cost quality is the re-encode: exporting as JPEG or WebP compresses the result. Choose PNG for a lossless output, or keep the quality slider at 90% or above. Heavy blur and extreme contrast do genuinely discard information, since that detail no longer exists in the output pixels.
Hue rotation spins every colour around the colour wheel by the same angle, keeping their relationships intact. It shifts the overall cast — warmer or cooler — rather than recolouring one object. To change a single colour you need a selection-based editor; this tool applies each adjustment to the whole frame.
No. The file is decoded, filtered, and re-encoded by your browser on a local canvas. Nothing is transmitted or stored, and the share link carries only the eight slider values and your export settings.
Filtering runs in your browser on a local canvas. The picture is never uploaded, and share links carry only the adjustment values.
Keep going
Image compressor
Bring the filtered export under a size budget in kilobytes.
Image cropper
Frame the shot before you grade it, with drag-to-place selection.
Watermark tool
Stamp text or a logo onto the finished image.
Palette from image
Pull the dominant colours out of a picture as CSS variables.