Image Filter: Grayscale, Sepia, Blur and Photo Effects

About the Image Filter

The Image Filter changes the look of a photo with ten adjustments: grayscale, sepia, invert, brightness, contrast, saturation, hue rotate, blur, sharpen and vignette. Choose, drop or paste an image, move the sliders and watch the preview change at once. Four presets, Vintage, Cool, Warm and Black and white, high contrast, set every slider in one click and leave them all editable. Everything happens in your browser: your photo never leaves your device, nothing is uploaded, and there is no account.

A comparison slider under the picture shows the original on its left and the filtered result on its right, so you can judge a change without switching views. It works with the mouse, with touch and with the arrow keys.

How to use it

The file is saved as <name>-filtered.<ext>, so holiday.jpg saved as PNG becomes holiday-filtered.png. If every slider is neutral the page says there is nothing to apply, and Download still saves the unchanged picture in the format you chose, which makes the tool a quick converter as well.

What each slider does

• Grayscale, Sepia and Invert blend the picture towards a grey, brown-toned or negative version of itself. At 100 percent the effect is complete; at 50 percent it is an even mix.
• Brightness multiplies every colour value. 100 percent is unchanged, 150 percent is half again as bright and 0 percent is black.
• Contrast pushes values away from, or towards, mid grey. 0 percent gives a flat grey picture.
• Saturation scales how colourful the picture is. 0 percent is grey, 100 percent unchanged and 300 percent very vivid.
• Hue rotate turns every colour around the colour wheel by the angle shown. 0 and 360 degrees are the same.
• Blur softens detail with a Gaussian blur. The number is the radius in pixels of the saved picture.
• Sharpen raises the contrast along edges with a small 3 by 3 kernel.
• Vignette darkens the picture towards the corners and leaves the centre alone.

The maths behind the sliders

The colour sliders follow the CSS Filter Effects definitions, so the preview and the saved file agree. Brightness and contrast act on each colour value $v$ from 0 to 255:

$v' = b \cdot v \qquad v'' = c\,(v' - 128) + 128$

where $b$ and $c$ are the slider values divided by 100. Grayscale uses the luminance weights $Y = 0.2126\,R + 0.7152\,G + 0.0722\,B$, so a pure red pixel $(255, 0, 0)$ becomes $0.2126 \times 255 \approx 54$, a grey of $(54, 54, 54)$. Sepia on white gives $(255, 255, 239)$.

The vignette multiplies each pixel by a factor that falls with its distance $d$ from the centre, where $d = 1$ is the corner:

$f = 1 - s\cdot\operatorname{clamp}\left(\frac{d - 0.35}{0.65},\,0,\,1\right)$

Here $s$ is the slider divided by 100. Nothing within 35 percent of the way out is touched, and at $s = 1$ the corners turn black.

Worked example

Take a 3000 by 2000 photo and press Black and white, high contrast. That preset sets grayscale to 100 percent, contrast to 150 percent and brightness to 105 percent. A mid-tone pixel of $(150, 100, 50)$ first becomes grey $0.2126 \times 150 + 0.7152 \times 100 + 0.0722 \times 50 \approx 107$. Brightness then gives $107 \times 1.05 \approx 112$, and contrast gives $1.5 \times (112 - 128) + 128 = 104$. The pixel ends as $(104, 104, 104)$, a little darker than before, while a light pixel is pushed lighter, which is the extra punch the preset is for.

Preview and saved file

The preview is drawn from a copy scaled to at most four million pixels, so sliders stay quick on a large photo. The saved file is made again from your original at full resolution with the same settings, in this order: the colour functions, then blur, then sharpen, then vignette. Blur radius is scaled for the preview so it looks the same as the saved result. The Cool and Warm presets are simple approximations built from hue, sepia and saturation, not camera white-balance profiles.

Saving: PNG, JPEG or WebP

• PNG is lossless and keeps transparency.
• JPEG is smaller for photographs. It has no transparency, so transparent areas are filled with the background colour you choose, white by default.
• WebP is usually the smallest and keeps transparency.

Animated GIF and WebP files are saved from their first frame.

Related tools

To cut away part of the picture first, use the Image Cropper. To switch file types without editing, use the Image Converter. To find the dominant tone of a picture before choosing a filter, try the Average Color Finder.

Limits worth knowing

The tool applies global adjustments. It does not retouch skin, remove backgrounds, apply curves or masks, or read colour profiles, and EXIF data such as the camera model or GPS position is not kept in the saved file. Images above 32 megapixels are refused with a message rather than risking a crash.

Frequently asked questions