# Image Filters Online: Brightness, Contrast, Grayscale, Sepia, Blur

Page: https://hirantha.me/tools/image-filters
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-10-15

Adjust brightness, contrast, saturation, hue, grayscale, sepia, invert and blur with a live before and after view. Same result in every browser.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

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. 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.

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.

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 |

Q: Does this work in Safari?
A: 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.

Q: In what order are the adjustments applied?
A: 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.

Q: Why does contrast at 0% give flat grey?
A: 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.

Q: What does the blur number mean?
A: 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.

Q: Can I use the same settings in CSS?
A: 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.

Q: Will saving as JPEG lower the quality?
A: 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.

Q: Why is my download smaller than the original picture?
A: 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.

Q: What happens to transparency?
A: 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.

Q: Is my photo uploaded anywhere?
A: 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: CSS Filter Effects Module Level 1 - W3C (https://www.w3.org/TR/filter-effects-1/); CanvasRenderingContext2D.filter - MDN (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter); CanvasRenderingContext2D.getImageData() - MDN (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData); MDN browser-compat-data (support tables for the canvas filter property) (https://github.com/mdn/browser-compat-data)

Related tools:

- [Image compressor](https://hirantha.me/tools/image.md): Shrink a photo or convert it between JPG, PNG, and WebP.
- [Rotate and flip an image](https://hirantha.me/tools/image-rotate-flip.md): Rotate a photo 90, 180 or any angle, flip it left to right or top to bottom, preview it live and save it as PNG, JPEG or WebP. Nothing is uploaded.
- [Resize an image](https://hirantha.me/tools/image-resize.md): Resize a photo by percentage, or an exact width or height.
- [Colour picker from image](https://hirantha.me/tools/color-picker-from-image.md): Click any pixel of a photo to get its HEX, RGB and HSL value, magnify it, and pull a five-colour palette out of the picture. Runs in your browser.
- [Remove EXIF data](https://hirantha.me/tools/remove-exif.md): Strip location and camera metadata from a photo before sharing it.