Skip to main content
CalcChef

Image Filters

Set brightness, contrast, grayscale, sepia, saturation, hue, invert and blur, or pick a look, then save as PNG, JPEG or WebP. Works in Chrome, Edge and Firefox. How it works

Use the Image Filters

About the Image Filters

The image filters tool applies eight canvas filters in this order: brightness (0 to 200%, where 100 is unchanged), contrast (0 to 200%), grayscale (0 to 100%), sepia (0 to 100%), saturation (0 to 200%), hue rotate (0 to 360 deg), invert (0 to 100%) and blur (0 to 10 px). Five looks (Black and white, Sepia, High contrast, Faded, Bright) set several at once. The page redraws the picture after a short pause and you save it as PNG, JPEG or WebP.

How to use this tool

  1. Choose an image file, up to 25 MB.
  2. Pick a look, or move the Brightness, Contrast, Grayscale, Sepia, Saturation, Hue rotate, Invert and Blur sliders.
  3. Choose PNG, JPEG or WebP under Save as (JPEG and WebP take a quality from 1 to 100), then press Download, or Reset Filters to start again.

Frequently asked questions

How do I make a photo black and white?
Press Black and white, which sets Grayscale 100% and Contrast 110%, or move Grayscale to 100% yourself. Lower values blend part of the color back in. Saturation 0% also removes the color. Press Download to save the gray picture.
What does 100% sepia do?
It gives the picture a brown tone; 0% leaves the colors unchanged. The page uses the browser’s own sepia filter, so the exact tone is the browser’s, not a recipe set by this page.
Why can I not download the filtered image?
Download stays off until the picture has been drawn with the current filters. It is also off after a decode error, a size error and when the browser ignores canvas filters, which is the usual cause in Safari. Each case shows a message above the sliders.
Does the saved image keep its original size?
In pixels, yes: the canvas is drawn at the picture’s own width and height and saved at that size. A PNG can be larger in bytes than a JPG original; choose JPEG or WebP under Save as, with a quality from 1 to 100, for a smaller file.
Is blur in pixels or percent?
Pixels, from 0 to 10 in steps of 0.1, measured on the full-size picture. So 4 px blurs a picture 400 px wide more than one 4000 px wide.
Does it work on an iPhone or in Safari?
Not at present. The sliders use the canvas filter property, which Safari on Mac and iPhone ships turned off by default, and browsers on an iPhone, Chrome included, almost always run on Safari’s engine. The page then says it cannot apply canvas filters and keeps Download off. Chrome, Edge and Firefox on a computer or an Android phone support it.

What the filters do

Choose an image up to 25 MB, pick a look or move the sliders, then press Download. The image is drawn on a canvas in your browser and is not uploaded. What the sliders do at their ends:

  • Brightness: 0% is black, 200% doubles it.

  • Contrast: 0% is flat gray, 200% doubles it.

  • Grayscale and Sepia: 100% is fully gray or fully brown-toned.

  • Saturation: 0% removes all color, 200% doubles it.

  • Hue rotate: turns every color around the color wheel; 360 deg is back where it started.

  • Invert: 100% gives a negative, 50% is flat gray.

The five looks set several sliders at once: Black and white is Grayscale 100% with Contrast 110%, Sepia is Sepia 90% with Contrast 90%, High contrast is Contrast 160% with Saturation 120%, Faded is Brightness 110%, Contrast 80%, Saturation 70% and Sepia 15%, and Bright is Brightness 130%.

How the filters are applied

The page sets the canvas context's filter property to brightness(b%) contrast(c%) grayscale(g%) sepia(p%) saturate(s%) hue-rotate(h deg) invert(i%) blur(r px) and draws the image at full size, 200 ms after the last slider move. The browser applies the effects in that order.

If the browser ignores canvas filters, the page says "This browser cannot apply canvas filters, so the image cannot be filtered or downloaded here. Try another browser." and Download stays off. It is also off after a decode error or a size error. Limits: 25 MB, 10,000 px a side and 40 megapixels.

The file keeps the picture's pixel size and is saved as filtered.png, filtered.jpg or filtered.webp. JPEG and WebP take a quality from 1 to 100, starting at 85; JPEG is put on white, as it has no transparency. A browser that cannot write the chosen format saves a PNG and says so.

Example: Grayscale 100% with Brightness 120% draws the picture gray and 20% brighter. Blur is in pixels of the full-size image, so 4 px blurs a small picture more than a large one.

Related Tools

View all tools
Image

Image Resizer

Resize an image to exact pixels, a percent, or cm, mm or inches at a DPI, with the aspect ratio locked or free, and save PNG, JPEG or WebP under a KB target.

Image

Image Cropper

Crop an image to 1:1, 4:5, 16:9, 9:16, golden or a custom ratio, type exact pixels or rotate it, and save PNG, JPEG or WebP at full size, with no scaling.

Image

Aspect Ratio Calculator

Find the aspect ratio of a size in pixels, such as 1920 × 1080 = 16:9, resize while keeping it, or get the missing side from a ratio like 21:9.

Image

Favicon Generator

Turn an image or a letter into favicon.ico (16, 32 and 48 px) and PNG icons at 16, 32, 180, 192 and 512 px, with the link tags and a site.webmanifest.

Media

Exif Reader

Exif viewer for JPEG, PNG, WebP, TIFF, HEIC and AVIF: camera, lens, exposure, GPS in decimal degrees, IPTC and XMP captions, and a copy without metadata.

Media

Color Palette Extractor

Extract 4 to 12 colors from an image by median cut and copy them as HEX, RGB, HSL or CSS variables, or download JSON; near-white is left out by default.