Image Filter Studio
Apply brightness, contrast, sepia, blur and more live, then copy the CSS filter string.
About Image Filter Studio
Canvas 2D and CSS share one filter engine: set ctx.filter = 'grayscale(100%)' and you get the luminance matrix 0.2126R + 0.7152G + 0.0722B, which turns pure red #FF0000 into rgb(54,54,54) rather than mid grey. Order matters as well — blur(4px) saturate(200%) and saturate(200%) blur(4px) are two different images. This studio applies the eight filters in one fixed, documented order and prints the exact string it used.
How to use Image Filter Studio
- 1
Drop an image on the box or click to pick one — or just start on the 600×400 colour chart that loads by default.
- 2
Hit a preset — Noir, Vintage, Vivid, Faded, Dreamy, Negative or Neon — to get a starting point.
- 3
Tune the eight sliders: brightness, contrast, saturation, grayscale, sepia, hue-rotate, invert and blur.
- 4
Press Compare to flip the canvas between the filtered result and the untouched original.
- 5
Copy the filter string into your stylesheet, or download the result as a PNG at the image's own pixel size.
Frequently asked questions
Is grayscale just the average of the three channels?
No, and that is the usual misconception. grayscale uses the luminance matrix 0.2126 red + 0.7152 green + 0.0722 blue, so pure red becomes rgb(54,54,54) and pure green becomes rgb(182,182,182), where a plain average would make both 85. Load the sample colour chart and push the grayscale slider to 100 to see it for yourself.
Does the CSS string reproduce exactly what the preview shows?
For the colour functions, yes: brightness, contrast, saturate, grayscale, sepia, hue-rotate and invert are resolution independent and give identical pixel values. blur is not — it is measured in pixels and depends on how large the element is actually rendered, so blur(5px) on an image shown at native size differs from the same image rendered at half size.
Is my image uploaded anywhere, and is there a size limit?
Nothing is sent: reading the file, drawing to the canvas and encoding the PNG all happen in your browser, and the page makes no network request at all. The one real limit is that images larger than 2400px on the long side are scaled down so the live preview stays responsive, which means the exported PNG is also capped at 2400px.
Why do the edges go transparent when I add blur?
Because blur averages each pixel with its neighbours, and beyond the edge of the bitmap there is nothing but transparency. That is standard filter behaviour, not a bug in the tool. If you need clean edges, crop a few pixels off each side after downloading, or use a smaller blur radius.