Image Filters Online: Brightness, Contrast, Grayscale, Sepia, Blur
Drag the sliders and watch your photo change, with a split view that shows the original on one side and the adjusted picture on the other.
Maintained by Hirantha Sandaruwan Lakshan. Updated 15 October 2026.
About this tool
There are eight adjustments: brightness, contrast, saturation, hue rotation, grayscale, sepia, invert and blur. Save the result as PNG, JPEG or WebP, or copy the matching CSS filter line. Everything runs in your browser and nothing is uploaded.
How it works
Canvas has a filter property that applies CSS filters, but MDN marks it as not Baseline, and MDN's compatibility data lists it in Chrome 52 and Firefox 49 but only behind a flag in Safari 18. So this tool does not use it. Each adjustment is written as arithmetic on the pixel values, using the formulas of the W3C CSS Filter Effects Module, which makes a photo come out the same in every browser and lets the maths be tested without a browser.
Each colour channel is scaled to 0 to 1. Brightness multiplies it by the amount b. Contrast is k x c + (0.5 - 0.5 x k). Saturation, hue rotation, grayscale and sepia are 3 by 3 colour matrices from the spec: grayscale mixes in the luma weights 0.2126, 0.7152 and 0.0722, and full sepia is the matrix 0.393 0.769 0.189 / 0.349 0.686 0.168 / 0.272 0.534 0.131. Invert is i + c x (1 - 2i). After every step the value is clamped to 0 to 1, as the spec's filter steps are, and the steps run in the order brightness, contrast, saturation, hue rotation, grayscale, sepia, invert, then blur. That is also the order of the CSS shown under the preview, so you can reuse the settings in a stylesheet. Transparency is never changed.
Blur is a Gaussian blur with the edge pixels repeated. For a standard deviation of 2 or more, three box blurs approximate it, using the box size the spec gives: d = floor(sigma x 3 x sqrt(2 pi) / 4 + 0.5), with the two-shifted-boxes rule when d is even. Below 2 a true Gaussian kernel is used. Colour is weighted by transparency while blurring, so a transparent edge does not pull dark colour into its neighbours. The slider is in pixels of the full-size picture, and the preview shrinks it in proportion.
The live preview works on a copy at most 1000 pixels on the long side so the sliders stay smooth. When you download, the same settings run over the full picture, one pass per adjustment with no allocation per pixel. To stay inside memory it limits the work to 50 million pixels on a computer and 16.7 million on a phone or tablet, and tells you when it scales down. Saving draws from a canvas, so the file has no camera or location metadata. If your browser has fingerprinting protection on, MDN notes it can add tiny noise to pixels read back from a canvas.
Worked examples
Black and white follows the luma weights
Grayscale at 100% turns pure red (255, 0, 0) into (54, 54, 54), pure green into (182, 182, 182) and pure blue into (18, 18, 18). The weights are 0.2126, 0.7152 and 0.0722, so green looks far lighter than blue once the colour is gone, as it does to the eye.
Sepia on white and on grey
Sepia at 100% turns white into (255, 255, 239): the red and green sums are above 1 and are clipped, while blue is 0.937 x 255 = 238.9, which rounds to 239. A mid grey of 128 becomes (173, 154, 120), a warm brown.
Brightness clips highlights, contrast stretches the middle
Brightness 50% turns (200, 100, 50) into (100, 50, 25). Brightness 200% gives (255, 200, 100): the red would be 400, so it is clipped to 255 and that detail is gone. Contrast 150% maps 150 to 161, 60 to 26 and 200 to 236, pushing values away from the middle grey of 127.5.
The eight adjustments and their formulas
| Adjustment | Range | No change at | Formula for a channel value c from 0 to 1 |
|---|---|---|---|
| Brightness | 0 to 300% | 100% | c x b |
| Contrast | 0 to 300% | 100% | k x c + 0.5 - 0.5 x k |
| Saturation | 0 to 300% | 100% | colour matrix with weights 0.213, 0.715, 0.072 |
| Hue rotate | -180 to 180 deg | 0 deg | colour matrix with cos and sin of the angle |
| Grayscale | 0 to 100% | 0% | luma matrix 0.2126, 0.7152, 0.0722 mixed by the amount |
| Sepia | 0 to 100% | 0% | sepia matrix mixed by the amount |
| Invert | 0 to 100% | 0% | i + c x (1 - 2i) |
| Blur | 0 to 50 px | 0 px | Gaussian, standard deviation in pixels |
Frequently asked questions
Does this work in Safari?
Yes. The adjustments are plain arithmetic in this page, so they do not depend on the canvas filter property, which Safari 18 only offers behind a flag. The result is the same in every browser, apart from small rounding differences in how each one draws the picture.
In what order are the adjustments applied?
Brightness, contrast, saturation, hue rotation, grayscale, sepia, invert, then blur, with each step clamped to the valid range before the next. Order matters: brightness before invert is not the same as invert before brightness. The CSS filter line under the preview is written in the same order.
Why does contrast at 0% give flat grey?
The CSS Filter Effects spec says contrast 0% creates a completely grey image. Every channel becomes 0.5, which is 127.5 of 255 and rounds to 128. It is not black, even though a few pages describe it that way.
What does the blur number mean?
It is the standard deviation of the Gaussian in pixels of the full-size picture. About two thirds of the blur weight falls within that distance of each pixel. The slider goes up to 50. On a 4000 pixel wide photo 5 is subtle and 40 is heavy, and the small preview scales it so what you see matches what you save.
Can I use the same settings in CSS?
Yes, copy the filter line under the preview. The colour adjustments use the formulas the CSS spec defines, so the browser should give very similar colours. Rounding can differ by a unit or two, and blur is an approximation of the same Gaussian. At the edges of the picture a CSS filter on an element fades out, while this tool repeats the edge pixels, which is what the spec uses for its filter() image function. Blur is in pixels of the original picture, so use a smaller number if the image is shown smaller.
Will saving as JPEG lower the quality?
JPEG and WebP are lossy, so each save compresses the picture again. Use PNG for a lossless result, or raise the quality slider. PNG files from photos can be much larger than JPEG, so choose the format by where the file is going.
Why is my download smaller than the original picture?
To avoid running out of memory the work is limited to 50 million pixels on a computer and 16.7 million on a phone or tablet. A larger picture is scaled down before the adjustments, and the page tells you the size it used. Pictures under the limit are saved at full size.
What happens to transparency?
The colour adjustments leave transparency alone, and blur treats transparent areas correctly. PNG and WebP keep transparency. JPEG cannot, so a picture saved as JPEG is placed on white first.
Is my photo uploaded anywhere?
No. The picture is processed inside your browser tab and never sent over the network. The saved file has no camera, date or location metadata.
Sources & references
Updated Oct 15, 2026