Image Filters

How to use the Image Filters

1. Drop a photo onto the box or click to choose one.
2. Click a look such as Vivid or Black & white, or move the sliders to adjust each setting yourself.
3. Press and hold Hold to compare to flip back to the original for a moment.
4. Pick a format and click Download image to save the full-resolution result.

Features

• Eight adjustments: brightness, contrast, saturation, hue, grayscale, sepia, blur and invert
• Ten one-click looks you can fine-tune
• Live preview with press-and-hold comparison
• Identical results in every browser, including older Safari
• Full-resolution export as JPG, PNG or WebP
• Private: the photo is processed on your device

What each slider does

All adjustments work on the red, green and blue value of every pixel. Here is the math behind them, using values from 0 (black) to 1 (full intensity):

• Brightness multiplies each channel: at 120%, a value of 0.5 becomes 0.6. Highlights that pass 1 are clipped to pure white, so large increases wash out skies.
• Contrast stretches values away from middle gray: new = (old − 0.5) × contrast + 0.5. Darks get darker and lights get lighter; below 100% everything moves toward gray.
• Saturation blends each pixel with its own gray version. 0% is fully gray, 100% is unchanged, and higher values push colors further from gray.
• Hue shift rotates every color around the color wheel while roughly keeping its brightness. Small shifts tint a photo; 180° swaps colors for their opposites.
• Grayscale replaces colors with their luminance, weighted 0.2126 red, 0.7152 green and 0.0722 blue, because the eye is most sensitive to green and least to blue.
• Sepia maps colors to warm browns, imitating toned prints from the nineteenth century.
• Invert replaces each value with 1 minus the value, giving a photographic negative at 100%.
• Blur is a Gaussian blur; the number is the radius in pixels of your original image.

The color adjustments use the same formulas as the CSS filter functions and are applied in the order listed on the page, then blur last.

Why this editor does its own pixel math

Browsers have a built-in shortcut for this kind of filtering, but it is not available in every browser; older versions of Safari, for example, ignore it, so filters made with it silently do nothing there. This tool calculates every pixel itself in JavaScript instead. The preview and the download therefore look the same on every device, and what you see is what you save. Blur is approximated with three fast box blurs in a row, a well-known technique that is visually indistinguishable from a true Gaussian.

What the one-click looks contain

Every look just moves the sliders, so you can start from one and keep tweaking.

Tips for natural-looking edits

• Go easy. Changes of 5–15% usually look better than big jumps. Use the compare button to check you have not overdone it.
• Raise contrast before saturation. Contrast alone often makes colors look richer, so you may need less saturation than you think.
• Watch for clipping. If clouds or faces turn into flat white patches, lower brightness or contrast until texture returns.
• For black and white, add a little contrast; pure grayscale of a color photo often looks flat.
• Use blur for backgrounds, text-free wallpapers or to soften a busy image behind a title.

Need other edits? Crop or straighten first, then filter, then compress for the web.

Frequently asked questions