Image

How Image Filters Work: Grayscale, Sepia, Contrast and Blur

ToolOrbit Team 2 min readUpdated
How Image Filters Work: Grayscale, Sepia, Contrast and Blur

A few small adjustments can transform an image: a touch more contrast, a grayscale conversion, or a subtle blur for a background. The Image Filters tool gives you those controls with live sliders, so you can dial in the look and download the result.

The adjustments you can make

  • Brightness, contrast and saturation for tonal control
  • Grayscale to convert to black and white
  • Sepia for a warm, vintage tone
  • Invert to flip colours, and blur to soften

How it works

The tool applies CSS-style canvas filters to your image in real time. Each slider maps to a standard filter function, and they stack — so you can, for example, combine full grayscale with extra contrast for a punchy monochrome look.

Applying filters and adjustments

  • Drag in or select an image.
  • Move the sliders and watch the preview update instantly.
  • Reset filters any time to start over.
  • Download the filtered image as a PNG.
Tip: a light blur (2–4px) plus reduced brightness makes a great background behind overlaid text.

Filtering produces a new, adjusted copy, so your original file is untouched.

The order that gives the cleanest result

Filters stack left-to-right, and order changes the look. Adjust contrast before saturation: boosting contrast first makes the colour pop range smaller, so later saturation changes are more predictable. Brightness and blur are order-insensitive in practice, but the combination grayscale-plus-contrast is the most useful pairing — toggling grayscale first, then lifting contrast, turns a flat image into a punchy monochrome instead of a grey wash.

Three looks you can dial in

  • Editorial black & white: full grayscale + a contrast boost to 20–30.
  • Warm vintage: sepia with saturation reduced slightly so the tone stays muted.
  • Soft background: blur 4px + brightness −15, ideal before overlaying text.
The preview updates on every slider move, so build a look, reset if it goes wrong, and only download once it matches the mood you are after.

Filters change the file, not just the look

Grayscale and sepia typically shrink a JPG a little; brightness and contrast can raise file size when they expand the tonal range. That is not a bug — the output format just re-encodes. The practical rule is to filter, compare the exported size against the original, and only keep the edit when the visual gain is worth the bytes. For a noisy photo, a touch of blur hides sensor grain and frequently costs nothing in perceived detail.


Tools mentioned

More reading

View all guides
When to Use Base64 Images (and When Not To)
Image

When to Use Base64 Images (and When Not To)

How to embed a Base64 image in HTML and CSS, when inlining helps, and the performance cost of doing it with large files.

2 min readUpdated
Crop vs Resize vs Compress: What Cropping Does to an Image
Image

Crop vs Resize vs Compress: What Cropping Does to an Image

What cropping changes, how it affects file size, and how it differs from resizing and compressing.

2 min readUpdated
PNG vs JPG vs WebP: Which Image Format Should You Use?
Image

PNG vs JPG vs WebP: Which Image Format Should You Use?

When to pick PNG, JPG or WebP, what lossy and lossless really mean, and how to convert without throwing away quality.

2 min readUpdated
Why Rotating an Image by 90 Degrees Loses No Quality
Image

Why Rotating an Image by 90 Degrees Loses No Quality

Why right-angle rotation is lossless, how it differs from rotating by an arbitrary angle, and how EXIF orientation causes sideways photos.

2 min readUpdated
Favicon Sizes: Which Ones You Need and How to Add Them
Image

Favicon Sizes: Which Ones You Need and How to Add Them

Which favicon sizes browsers, iPhones and Android actually use, how to turn a logo into a clear 16px icon, and how to test it before launch.

2 min readUpdated
How to Pick a Color from an Image (Copy HEX & RGB Codes)
Image

How to Pick a Color from an Image (Copy HEX & RGB Codes)

Pick exact HEX, RGB, and HSL color codes from any image. Extract dominant color palettes and copy color codes in 1 click.

2 min readUpdated
Your Photos Know Where You Live: How to Remove EXIF Data
Image

Your Photos Know Where You Live: How to Remove EXIF Data

Every phone photo embeds GPS coordinates, device details and timestamps. Here is what EXIF data reveals, who strips it for you, and how to remove it yourself.

3 min readUpdated
The Complete Guide to Image Optimization
Image

The Complete Guide to Image Optimization

Choose the right format, compress without visible loss, and serve responsive images that keep your pages fast.

2 min readUpdated