Does the saved photo look the same as the CSS filter?

Yes, for the colour adjustments. Each slider is one of the CSS filter functions, worked out exactly as the W3C Filter Effects specification defines it and applied in the order the CSS value lists them, and the results were checked against what Chrome draws, to within three levels of 255, the difference being rounding. Blur differs in two ways: CSS measures it in pixels of the image as displayed, so it matches only at the image’s natural size, and CSS fades the edges into transparency, while the saved photo keeps its edge pixels.

How do I make a photo black and white?

Choose the “mono” look, or move Greyscale to 100%. Greyscale mixes each colour towards its luma, with the weights of the Rec. 709 standard, so greens read lighter than blues, as the eye sees them. For a harder, darker black and white, “noir” adds contrast and takes a little brightness away.

Is the photo saved at full size?

Yes. The preview is drawn from a copy at most 1,200 pixels on its longest side so the sliders stay quick, but Download and Copy image filter the full-size picture, and blur is measured in pixels of the full-size picture, so the preview shows the same softness scaled down. The camera’s EXIF block, GPS position included, is not carried over into the saved file.

Is my photo uploaded?

No. The picture is decoded, filtered and encoded in your browser; nothing is sent anywhere, and nothing is kept once you close the page.

Image Filters

runs in your browser

Adjust brightness, contrast, saturation, hue, sepia and blur, or pick a look like mono or vintage, then save the photo and copy the matching CSS filter.

Look

Drop a file here, or .

JPEG, PNG, WebP, AVIF or GIF (not SVG). Filtered in your browser; nothing is uploaded.

about this tool

Adjust a photo

Open a JPEG, PNG, WebP, AVIF or GIF — any image your browser can decode, though not an SVG — and move the sliders: brightness, contrast, saturation, greyscale, sepia, hue, invert and blur. The preview follows as you drag, and the "show original" button above it switches back to the picture as it was so you can compare. Each slider that has moved gets a reset button (a double-click on the slider does the same), or pick a look to start from — mono, noir, sepia, vintage, faded, vivid, warm, dramatic or negative. A look only sets the sliders, so it can be tuned from there; once you move one, the look reads "custom", unless the sliders land on another look's values. Clearing the picture keeps the sliders where they are, so the same look can go straight onto the next one; "reset all" puts them back.

The same numbers as CSS

Every slider is one of the functions of the CSS filter property, and the tool writes the value out as you go — contrast(120%) saturate(140%) and so on — ready to copy into a stylesheet. The colour adjustments are worked out exactly as the W3C Filter Effects specification defines them: each one is a fixed matrix or a straight-line transfer on the red, green and blue values in sRGB, applied in the order the value lists them, with each result kept between black and white before the next. The results were checked against what Chrome draws for the same value on the sample picture: a single adjustment matches to within one level of 255, and a chain of six to within three, about one level on average. The small difference is rounding — Chrome rounds down to a whole level after every step, while this tool keeps full precision until the end and rounds once, to the nearest.

The order matters, and it is the order of the sliders, top to bottom. Contrast after brightness is not the same as brightness after contrast, because anything pushed past white by the first is flattened before the second sees it — which is also how a browser draws the CSS value.

Blur is a Gaussian blur with the standard deviation you set, in pixels of the full-size picture: an exact kernel below 2 px, and from 2 px the three box blurs the specification describes, which stay within about 3% of the true curve. Against Chrome's own blur at 3 px it differs by up to 8 levels of 255 right beside a sharp edge, and by under one level on average. It differs from CSS in two ways. CSS measures blur in pixels of the element as it is shown, so the pasted value matches only when the image is displayed at its natural size. And a browser fades a blurred element's edges into transparency; a photo should keep its edges, so here the edge pixels are extended instead.

Saving

The preview is drawn from a copy at most 1,200 pixels on its longest side, so the sliders stay quick on a large photo; for a bigger picture it is a close likeness rather than an exact one. Download and Copy image filter the full-size picture, a slice at a time so the page stays responsive, and save it as PNG, JPEG or WebP (WebP where the browser can write it — the tool checks before starting). A JPEG is saved as JPEG unless you choose otherwise, and anything else as PNG, so transparency is kept by default. Only the pixels are written, so the camera's EXIF block — GPS position, serial numbers, the date — is left out. JPEG has no transparency, so a transparent picture saved as JPEG goes onto white, and the tool says so first; saved as PNG or WebP, its transparency is kept, and blur softens the transparent edges without letting hidden colour bleed in.

Limits

These are eight of the CSS filter functions — opacity and drop-shadow are left out — not a full photo editor: there are no curves, no white balance by temperature, no sharpening and no local adjustments. The browser converts a wide-gamut (Display P3) photo to sRGB when it decodes it, so its most saturated colours are clipped first, and it works in 8 bits a channel, so a 16-bit PNG is saved with 8; an animated GIF, WebP or PNG keeps only its first frame. The tool says when either applies. Pictures over 50 megapixels are refused, since filtering them would need more memory than a browser tab can count on. To cut the picture to shape or change its size afterwards, resize and crop it; to make the file smaller, compress it. Nothing is uploaded.

questions

Does the saved photo look the same as the CSS filter?: Yes, for the colour adjustments. Each slider is one of the CSS filter functions, worked out exactly as the W3C Filter Effects specification defines it and applied in the order the CSS value lists them, and the results were checked against what Chrome draws, to within three levels of 255, the difference being rounding. Blur differs in two ways: CSS measures it in pixels of the image as displayed, so it matches only at the image’s natural size, and CSS fades the edges into transparency, while the saved photo keeps its edge pixels.
How do I make a photo black and white?: Choose the “mono” look, or move Greyscale to 100%. Greyscale mixes each colour towards its luma, with the weights of the Rec. 709 standard, so greens read lighter than blues, as the eye sees them. For a harder, darker black and white, “noir” adds contrast and takes a little brightness away.
Is the photo saved at full size?: Yes. The preview is drawn from a copy at most 1,200 pixels on its longest side so the sliders stay quick, but Download and Copy image filter the full-size picture, and blur is measured in pixels of the full-size picture, so the preview shows the same softness scaled down. The camera’s EXIF block, GPS position included, is not carried over into the saved file.
Is my photo uploaded?: No. The picture is decoded, filtered and encoded in your browser; nothing is sent anywhere, and nothing is kept once you close the page.