How do I make an image black and white?

Use the black and white preset, or push the grayscale slider to 100%. Adding a little contrast — around 110% — usually stops a desaturated photo looking flat.

Does applying filters reduce image quality?

The filter itself works at full resolution and the export is a lossless PNG, so nothing is thrown away. The only loss comes from the original file if it was already a compressed JPEG.

Can I use the same filters in CSS on my website?

Yes — that is what the copyable declaration is for. Applying the CSS to an gives an identical result in the browser, without shipping a second copy of the image.

What does hue rotate actually do?

It shifts every colour around the colour wheel by the number of degrees you set, leaving brightness and saturation alone. Small shifts warm or cool a photo; large ones produce deliberately unnatural colour.

Is my photo uploaded anywhere?

No. The image is decoded, filtered and re-encoded by your own browser, so it never leaves your device — which matters for photographs of documents or people.

Image Filters

Apply grayscale, sepia, contrast, blur and hue shifts to a photo, then export the PNG and copy the matching CSS.

Image Filters runs entirely in your browser. Your photo is filtered on your device and never uploaded.

Open the Image Optimizer

About Image Filters

Canvas understands the same filter grammar CSS does, which makes this tool unusually honest: the preview, the exported PNG and the copyable CSS declaration all come from one filter string, so they can never drift apart. Ten one-tap looks cover the usual ground — black and white, vintage, noir, faded, punchy — and nine sliders sit underneath for anything else. Only the sliders you move appear in the output, which keeps the CSS short enough to paste straight into a stylesheet. Filters apply to the image at full resolution rather than the scaled preview, so what you download matches what you see. Your picture is processed in your browser and never uploaded.

Features

Brightness, contrast, saturation, grayscale, sepia, invert, hue rotate, blur and opacity
Ten presets including black and white, vintage, noir and faded
Live preview at full quality
Copyable CSS filter declaration matching the export exactly
Filters applied at the image's full resolution
Reset to neutral in one click
Only non-neutral filters appear in the output string
Everything runs in your browser

How to use the Image Filters

Drop an image into the tool
Tap a preset, or move the sliders yourself
Check the preview at full resolution
Download the PNG, or copy the CSS to reuse the look on the web

Example

Input

Black & white preset

Output

filter: contrast(110%) grayscale(100%);

The same string drives the canvas export and the CSS you copy.

Common errors & troubleshooting

The downloaded file is larger than the original. — Exports are PNG, which is lossless and much bigger than a JPEG photo. Run the result through an image optimiser if size matters more than perfect fidelity.
The CSS looks different in the browser than the export. — Check for a filter already applied to a parent element — CSS filters compound down the tree. The exported PNG has the filter baked in, so it should be used without any additional filter.
A heavy blur is slow on a large photo. — Blur is the one filter whose cost grows with both radius and image size. Reduce the radius, or resize the image first if you only need a background texture.

Frequently asked questions

How do I make an image black and white?: Use the black and white preset, or push the grayscale slider to 100%. Adding a little contrast — around 110% — usually stops a desaturated photo looking flat.
Does applying filters reduce image quality?: The filter itself works at full resolution and the export is a lossless PNG, so nothing is thrown away. The only loss comes from the original file if it was already a compressed JPEG.
Can I use the same filters in CSS on my website?: Yes — that is what the copyable declaration is for. Applying the CSS to an <img> gives an identical result in the browser, without shipping a second copy of the image.
What does hue rotate actually do?: It shifts every colour around the colour wheel by the number of degrees you set, leaving brightness and saturation alone. Small shifts warm or cool a photo; large ones produce deliberately unnatural colour.
Is my photo uploaded anywhere?: No. The image is decoded, filtered and re-encoded by your own browser, so it never leaves your device — which matters for photographs of documents or people.

Related tools

Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
Color Blindness Simulator — See any image the way people with protanopia, deuteranopia or tritanopia see it.
Blur & Redact Image — Permanently blur, pixelate or black out parts of a screenshot before sharing it.
Round Image Corners — Clip photos to rounded rectangles or circles and export PNGs with transparent corners.
Image Splitter — Cut a picture into a grid of tiles and download them as a ZIP.