Photo Filters
Apply grayscale, sepia, blur, brightness and contrast filters to a photo in your browser, with live preview and the original always preserved.
Upload an image to start.
Two of these sliders are the same control
CSS filters are colour matrices, and the specification defines
grayscale(a) and saturate(1 − a) with the same
one — very nearly. Saturate uses the luminance weights 0.213 / 0.715 / 0.072 and
grayscale uses 0.2126 / 0.7152 / 0.0722, the same numbers with four more digits. Sweeping the
entire colour cube at five amounts, the largest disagreement between them is
1 level out of 255.
Using both is not additive, either. Matrices compose, so grayscale g followed by saturate s is exactly saturate of (1 − g) × s:
| Grayscale | Then saturate | Is really | Same result? |
|---|---|---|---|
| 50% | 100% | saturate 50% | yes |
| 0% | 50% | saturate 50% | yes |
| 50% | 50% | saturate 25% | yes |
| 100% | 200% | saturate 0% | yes |
| 50% | 200% | saturate 100% | yes |
The bold row is the one worth knowing. Once grayscale reaches 100% the saturate slider does nothing at all, at any setting, because multiplying zero colour by any amount is still zero. And halfway grayscale with double saturate returns the original image exactly.
Sepia is not a tint, it is a collapse
Running 140,608 evenly spaced colours through the sepia matrix and counting how many distinct ones come out:
| Sepia | Colours surviving | Share |
|---|---|---|
| 0% | 140,608 | 100.0% |
| 25% | 139,814 | 99.4% |
| 50% | 138,570 | 98.6% |
| 75% | 133,932 | 95.3% |
| 100% | 839 | 0.6% |
At full strength it is not shifting hues, it is projecting a three-dimensional cube onto something close to a single line. Under a thousand colours remain. Grayscale at 100% leaves 256 — every grey there is — so full sepia carries a little over three greys' worth of information, dressed in brown. Note how sudden it is: at 75% it has still kept 95% of the cube.
It is not neutral about brightness either. The three rows of the sepia matrix sum to
1.351, 1.203, 0.937 rather than to 1, so it lifts reds,
lifts greens less, and pushes blues down. White comes out as
rgb(255, 255, 239) — cream, not white — and mid grey
128 arrives at rgb(173, 154, 120), considerably brighter than it
started.
Which is where the washed-out highlights in a sepia photograph come from: 12.9% of the colour cube is pushed past 255 and flattened against the top of the range before the tint is even visible. Grayscale and saturate clip nothing, because their rows sum to one.
The order is fixed, so some looks are unreachable
The filters here run in one order — grayscale, then sepia, then blur, brightness, contrast, saturate. Matrices do not commute, and these two disagree completely:
| Colour | Grayscale then sepia | Sepia then grayscale |
|---|---|---|
rgb(200, 60, 40) | rgb(119, 106, 82) | rgb(119, 119, 119) — neutral grey |
rgb(40, 90, 200) | rgb(118, 105, 82) | rgb(110, 110, 110) — neutral grey |
rgb(120, 200, 80) | rgb(235, 209, 163) | rgb(195, 195, 195) — neutral grey |
Sepia applied to an already-grey image still tints it. Grayscale applied to an already-sepia image strips the tint out entirely and leaves plain grey. Only the first is available here, which is the sensible default — but it does mean "sepia, then desaturate" is a look this tool cannot produce at all.
None of it is reversible. Turning a colour cube fully grey and then applying saturate 500% returns 16 of 4,096 colours — exactly the ones that were already grey to begin with. The download button gives you the result, not the recipe, so keep the original.
How to use
- Choose a photo.
- Adjust the filter sliders and watch the preview.
- Stack filters in the order that suits.
- Download the result — your original is untouched.
Frequently asked questions
Does the order of filters matter?
Yes, considerably. Filters apply in sequence, each working on the previous result, so blurring then increasing contrast gives a different image from doing it the other way round. This surprises people who expect a set of independent adjustments.
What is the difference between brightness and exposure?
Brightness shifts every value up or down uniformly, which flattens the image and can clip highlights to pure white. Exposure adjustment in proper photo software works on the linear light values and behaves more like changing the camera setting. For casual use the distinction rarely matters; for recovering detail it matters a great deal.
Why does increasing contrast lose detail?
Because it stretches the tonal range, pushing the darkest values to black and the brightest to white. Anything pushed past the ends is clipped and cannot be recovered. Small contrast increases are usually safe; large ones destroy shadow and highlight detail permanently in the output.
Is grayscale the same as desaturating?
Not quite. Simple desaturation averages the channels, while a proper grayscale conversion weights them to match how the eye perceives brightness — green contributes most, blue least. The weighted version keeps tonal relationships that flat averaging flattens, which is why skies and skin look better.
Does this modify my original file?
No. The filtered version is produced as a new image for you to download, and the file on your device is untouched. That matters because these adjustments are destructive once saved — keeping the original is what lets you change your mind.
Does my photo get uploaded?
No. Everything runs in your browser using canvas and CSS filters, so nothing is transmitted at any point.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.