About the Image Filters — Grayscale, Blur, Brightness & Contrast
This tool applies grayscale, colour inversion, blur, brightness, contrast and saturation adjustments to an image, all combinable in a single pass, using the same CSS filter effects your browser already implements for rendering web pages. Every slider updates a live preview so you can see the effect before downloading, and because the processing runs locally there is no upload step and no wait for a server round trip.
How to use the Image Filters — Grayscale, Blur, Brightness & Contrast
- 1
Upload the image you want to adjust.
- 2
Toggle grayscale or invert colours if you want either applied.
- 3
Drag the blur, brightness, contrast and saturation sliders — the preview updates as you go.
- 4
Download the filtered image once it looks right.
What people use it for
Preparing a photo for print
Increasing contrast slightly and converting to grayscale is a common step before sending a photo to a black-and-white printer.
Creating a placeholder or background image
A heavily blurred, dimmed version of a photo makes a good background behind text without competing for attention.
Correcting a flat or dark photo
Raising brightness and contrast together can rescue a photo taken in poor lighting without needing dedicated photo editing software.
How the filters combine
Each filter is applied in the same pass by chaining them together, in the order grayscale, invert, blur, brightness, contrast, then saturation, before the image is drawn to the output canvas. This mirrors how the CSS filter property works on web pages, since it uses the same underlying browser capability. Because they are combined rather than applied as separate sequential edits, there is no intermediate re-encoding between them, and no accumulated quality loss from combining several effects at once.
What 100% means on each slider
Brightness, contrast and saturation are all expressed as a percentage of the original, where 100% is unchanged. Below 100% reduces that property — 0% brightness is pure black, 0% saturation is fully grayscale, 0% contrast is a flat mid-grey image. Above 100% increases it, with no fixed ceiling on how far you can push contrast or saturation before the image starts to look artificial. Blur is different: it is measured in pixels of blur radius rather than a percentage, so 0 means no blur and larger numbers apply a progressively stronger Gaussian blur.
Tips
- Small adjustments, five to ten percentage points, often look more natural than large swings on brightness and contrast.
- Grayscale plus a slight contrast increase is a reliable combination for print or a moody aesthetic.
- Heavy blur is genuinely useful for background images specifically because it removes distracting detail behind text.