Image Filters
Grayscale, sepia, invert, brightness, contrast, saturation, hue rotate, blur, pixelate and threshold on a photo in your browser — with the matching CSS filter.
The filtered image to download as PNG, JPEG or WebP, the list of steps applied, and the CSS filter line that gives the same look on a web page.
Example: grayscale 100 % + blur 3 px is filter: grayscale(100%) blur(3px); pixelate at 40 px turns a 640 × 360 photo into 16 × 9 blocks; threshold at 128 makes a black-and-white stencil.
The CSS filter functions,
applied to pixels.
Which filters are CSS functions, which work on the pixel data, and how to reuse the result.
CSS filters
grayscale, sepia, invert, brightness, contrast, saturate, hue-rotate and blur are the functions of the Filter Effects specification, evaluated here by the canvas filter property in the order listed — the same maths a browser uses for the CSS filter property, which is why the page hands you the equivalent CSS line. 100 % brightness, contrast and saturation mean unchanged; grayscale, sepia and invert are 0 % off and 100 % full.
Pixel-stage effects
Pixelate draws the filtered image onto a canvas of (width ÷ block) × (height ÷ block) pixels and scales it back up with smoothing off, so every block is the average of its area. Threshold reads the pixel data and sets each pixel to black or white by its luminance against the cut you set — a stencil, not an edge detector. Both run after the CSS filters.
Output
The canvas is encoded by the browser as PNG (lossless, keeps transparency), WebP or JPEG (quality you set; transparency composited on white). No metadata is carried over. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- Filter Effects Module Level 1 functions applied through the canvas filter property; pixelate by block averaging and threshold by lightness on the pixel data; encoded by the browser
Last reviewed 22 September 2026. How results are checked: How we verify.