Image Filters Online: Grayscale, Invert, Blur, Brightness, Contrast and Saturation

Six adjustments you can stack on one picture, with a preview and a lossless PNG download. The file stays on your device.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Fill in the settings to see your result here.

Your result appears here instantly — nothing is uploaded.

Quick answers

How do I make an image black and white?: Tick Grayscale. Every pixel is replaced with a grey of the same perceived lightness, so the picture keeps its tones but loses all colour. Raising Contrast to about 110 or 120 percent afterwards stops the result looking flat.
How do I invert the colours of an image?: Tick Invert colours. Each red, green and blue value v becomes 255 minus v, so black turns white, white turns black, and every colour becomes its opposite, as in a photo negative. Inverting a second time restores the original.
What is the difference between brightness and contrast?: Brightness multiplies every pixel value by the same factor, making the whole picture lighter or darker. Contrast pushes values away from middle grey or pulls them toward it, widening or narrowing the gap between light and dark areas.
Is grayscale the same as 0 percent saturation?: They look the same. Both reduce each pixel to a grey based on its perceived lightness, using practically the same weights for red, green and blue. Use the Grayscale tick box for a full conversion and the Saturation slider when you want only part of the colour removed.
How do I blur an image for a website background?: Set Blur to somewhere between 8 and 20 px and lower Brightness to 60 or 70 percent so that light text stays readable on top. Blur is measured in pixels of the original file, so a large photo needs a higher value than a small one.

About Image Filters — Grayscale, Blur, Brightness & Contrast

Choose a picture and apply any mix of six adjustments: Grayscale, Invert colours, Blur from 0 to 20 pixels, and Brightness, Contrast and Saturation from 0 to 200 percent, where 100 means unchanged. All of them are applied together in a single pass, so stacking several costs no extra quality, and the result is saved as a PNG with the same pixel dimensions as the source. These are the standard filter functions browsers use for web page effects, so a look you build here can be reproduced in a stylesheet with the same numbers. There are no one-click presets such as sepia or vintage, and no sharpening.

What each filter does and the range it accepts

Control	Range	No change at	Effect
Grayscale	On or off	Off	Removes all colour, keeping perceived lightness
Invert colours	On or off	Off	Replaces every channel value v with 255 - v
Blur	0 to 20 px, steps of 1	0	Gaussian blur; the value is its standard deviation, as in CSS blur()
Brightness	0 to 200%, steps of 5	100%	Multiplies every channel; 0% is black
Contrast	0 to 200%, steps of 5	100%	Scales distance from middle grey; 0% is flat grey
Saturation	0 to 200%, steps of 5	100%	Scales colour intensity; 0% is grey

Filters are always applied in this order from top to bottom, whatever order you move the controls in.

Brightness, contrast and invert: what happens to a pixel value

Channel values run from 0 (black) to 255 (white). These figures follow the standard definitions of the filter functions; results are capped at 0 and 255.

Original value	Brightness 50%	Brightness 150%	Contrast 50%	Contrast 150%	Inverted
0	0	0	64	0	255
64	32	96	96	32	191
100	50	150	114	86	155
128	64	192	128	128	127
200	100	255 (capped)	164	236	55
255	128	255	191	255	0

Values are rounded to whole numbers. Once a value is capped at 255 or 0, detail in that area is gone: lowering brightness again in a second pass will not bring it back.

The formulas behind grayscale, brightness and contrast

Grayscale: grey = 0.2126 x R + 0.7152 x G + 0.0722 x B. Brightness: new = old x (percent / 100). Contrast: new = (old - 127.5) x (percent / 100) + 127.5. Invert: new = 255 - old.

Grayscale weights green most heavily because eyes are most sensitive to it. Pure green (0, 255, 0) becomes a light grey of about 182, pure red (255, 0, 0) a dark grey of about 54, and pure blue (0, 0, 255) a near-black 18. That is why a red and a blue that look equally vivid in colour end up as clearly different greys. Brightness is a plain multiplier, so 150 percent turns 100 into 150. Contrast pivots on middle grey, 127.5: at 150 percent a value of 200 moves to 236 and a value of 100 moves to 86, while middle grey stays put. At 0 percent every pixel lands on middle grey.

Filter recipes for common jobs

Starting points using the tool's own controls. Adjust by one or two slider steps to suit the photo.

Punchy black and white

Grayscale on, Contrast 120%, Brightness 100%

A monochrome picture with deeper shadows and brighter highlights than the plain conversion.

Dimmed, blurred background behind text

Blur 12 px, Brightness 60%, Saturation 80%

A soft, darker version of the photo that does not compete with white headings placed over it.

Rescuing a dull, underexposed photo

Brightness 120%, Contrast 110%, Saturation 115%

Lighter overall with a little more separation and colour. Watch skies and faces for areas that clip to pure white.

Negative of a scanned document or dark-mode screenshot

Invert colours on, everything else at default

White text on black becomes black text on white, which uses far less ink when printed.

Muted, washed-out look

Saturation 50%, Contrast 90%, Brightness 105%

Half the colour intensity with slightly lifted shadows.

Order of filters, output format and browser support

The filters run in a fixed sequence: grayscale, invert, blur, brightness, contrast, saturation. The order matters in a few combinations. Because grayscale comes first, raising Saturation afterwards has nothing to work on and the picture stays grey. Because invert comes before brightness, lowering Brightness darkens the already inverted picture.

The download is always PNG at the source's full pixel size. PNG is lossless, so the filtered pixels are stored exactly, but a filtered camera photo can be a larger file than the JPEG it came from. Use the Image Compressor on this site afterwards if you need a small JPEG or WebP.

Blur spreads each pixel over its neighbours, and at the borders of the picture there are no neighbours on one side. With strong blur the outermost pixels can therefore come out partly transparent. If that shows as a faint fade at the edges, crop a few pixels off each side.

The tool depends on a canvas filter feature that not every browser has offered. If the downloaded picture looks identical to the original whatever you set, open the page in a current version of Chrome, Edge or Firefox.

The Details panel lists Dimensions, File size and Format, plus a Filters applied line. With only the three sliders in play it spells them out, for example brightness(120%), contrast(100%), saturate(100%); once a tick box or blur is added it shows a count such as 4 effects.

How to get your result

1
Under Image, choose a photo or graphic up to 30 MB.
2
Tick Grayscale to remove all colour, or Invert colours for a negative.
3
Move Blur to set the blur strength between 0 and 20 px.
4
Set Brightness, Contrast and Saturation. Each slider moves in steps of 5 from 0 to 200 percent and starts at 100.
5
Check the preview, then download the PNG, saved as the original name with -filtered added.

Answers to common questions

Can I apply several filters at the same time?

Yes. Every control that is not at its neutral setting is applied in the same pass, and the picture is encoded once at the end. Combining five adjustments loses no more quality than applying one.

What does the blur value mean?

It is the strength of a Gaussian blur in pixels of the original image. Strictly it is the standard deviation of the blur, the same meaning as in CSS blur(), so the visible smear reaches two to three times that distance. 2 to 4 px softens fine detail, 8 to 12 px makes small text unreadable, and 20 px reduces a typical photo to broad areas of colour. On a very large image the same number looks weaker.

Is my picture uploaded to apply the filters?

No. The file is opened, filtered and saved by your own browser. Nothing is sent to a server.

Can I blur only part of an image, such as a face or a number plate?

No. Every filter here applies to the whole picture. To hide one area you need an editor with a selection or brush tool.

Is there a sepia, vintage or sharpen filter?

No. The controls are Grayscale, Invert colours, Blur, Brightness, Contrast and Saturation. A warm tint, hue shift or sharpening needs a fuller photo editor.

Why does my picture turn solid black or solid grey?

Brightness at 0 percent multiplies every pixel by zero, which is black. Contrast at 0 percent moves every pixel to middle grey. Move the slider back toward 100 percent.

Does grayscale make the file smaller?

Sometimes a little, since grey pixels compress better than coloured ones, but the PNG still stores full colour channels. For a meaningfully smaller file, compress the result as JPEG or WebP.

How do I reset an image to how it started?

Untick Grayscale and Invert colours, set Blur to 0 and return Brightness, Contrast and Saturation to 100 percent. The source file is never modified, so you can also just choose it again.

Can I use the same settings in CSS?

Yes. The controls correspond to the CSS filter functions grayscale(), invert(), blur(), brightness(), contrast() and saturate(). Blur 12 px with Brightness 60% is filter: blur(12px) brightness(60%). The CSS Filter Generator on this site writes the rule for you.