Image Filters

About Image Filters

Available Filters

Filter	What It Adjusts	Range	Common Use
Brightness	Overall lightness of the image	0-200% (100% = no change)	Fixing underexposed or overexposed photos
Contrast	Difference between light and dark areas	0-200%	Making images pop or creating a flat look
Saturation	Colour intensity / vibrancy	0-200%	Boosting colours or creating muted, desaturated looks
Grayscale	Removes colour information	0-100%	Black and white photography, document scanning
Sepia	Warm brown/amber tone over the image	0-100%	Vintage and antique photo effects
Blur	Softens the image by averaging nearby pixels	0-20px	Soft focus, background effects, privacy blurring
Hue Rotate	Shifts all colours around the colour wheel	0-360°	Creative colour effects, colour grading
Invert	Reverses all colours (creates a negative)	0-100%	Negative effects, accessibility testing

All eight filters can be combined. Each slider updates the preview instantly so the effect is visible before downloading.

How Do These Filters Actually Work?

This tool uses the CSS filter property for live preview and the Canvas API's CanvasRenderingContext2D.filter to bake the filters into actual pixel data when downloading. The W3C Filter Effects Module Level 1 specification defines how each function transforms pixels. Here is what each one does mathematically:

Brightness multiplies every RGB channel by the percentage value. At 150%, a pixel with an R value of 100 becomes 150. At 0%, the image is solid black because every channel is multiplied by zero.

Contrast adjusts the difference between each pixel and mid-grey (128). The formula is output = factor * (input - 128) + 128, where the factor is the percentage divided by 100. At 0% contrast, every pixel collapses to flat grey. Above 100%, lights get lighter and darks get darker.

Saturation scales how far each pixel's colour sits from its greyscale equivalent. At 0%, the image is fully desaturated (identical to greyscale). At 200%, colours are twice as intense as the original.

Grayscale converts each pixel to its luminance value using a weighted sum of the RGB channels: 0.2126R + 0.7152G + 0.0722B. These weights come from the ITU-R BT.709 standard and reflect how the human eye perceives brightness - green contributes far more than blue because the eye has more green-sensitive cone cells.

Sepia applies a colour matrix that shifts tones towards warm amber and brown. The matrix multiplies each RGB channel by fixed coefficients to produce the characteristic vintage look. Sepia toning dates back to the 1880s, when photographers treated silver-based prints with sepia derived from cuttlefish (Sepia officinalis) ink. The chemical process replaced metallic silver with silver sulfide, which is about 50% more stable - so sepia-toned prints lasted longer, not just looked warmer.

Blur applies a Gaussian blur. The algorithm convolves each pixel with a kernel (a small matrix of weights following a bell curve distribution). The pixel radius controls the standard deviation of the Gaussian distribution. A 5px blur averages each pixel with its neighbours within roughly a 5-pixel radius, weighted so closer pixels contribute more. Larger radii produce softer images but take more computation because the kernel grows.

Hue Rotate rotates every colour around the HSL colour wheel by the given angle. At 180 degrees, reds become cyan, greens become magenta, and blues become yellow. At 360 degrees, the image looks identical to the original because it has completed a full rotation.

Invert subtracts each RGB value from 255. A pixel at (200, 50, 100) becomes (55, 205, 155). At 50% inversion, the output blends the original and inverted values equally, producing a washed-out mid-tone effect.

Built-In Presets

Preset	Filter Settings	Look
Vintage	Sepia 40%, brightness 110%, contrast 85%, saturation 70%	Warm, aged, nostalgic film look
Dramatic	Contrast 150%, brightness 90%, saturation 120%	Bold, intense, high-impact
Faded	Contrast 80%, brightness 110%, saturation 60%	Washed-out, editorial, film-like
B&W	Grayscale 100%, contrast 120%	Classic black and white
Warm	Hue rotation 20 degrees, saturation 130%, brightness 105%	Golden, warm tones
Cool	Hue rotation 180 degrees, saturation 80%, brightness 105%	Blue-tinted, crisp, modern
Negative	Invert 100%	Full colour inversion (photo negative)

Presets are a starting point. After applying one, tweak individual sliders to fine-tune the look. The Negative preset is useful for checking contrast and readability in inverted colour schemes, which some accessibility tools require.

Common Editing Workflows

Goal	Recommended Steps
Fix a dark photo	Increase brightness to 120-140%, then boost contrast slightly to 110%
Make colours more vivid	Increase saturation to 130-150%, optionally add slight contrast boost
Create a vintage look	Start with Vintage preset, reduce saturation to taste, adjust brightness
Convert to black and white	Set grayscale to 100%, then fine-tune contrast and brightness
Blur a background for text overlay	Set blur to 5-10px, reduce contrast slightly for easier text readability
Create a muted, editorial look	Reduce contrast to 80%, reduce saturation to 70%, boost brightness to 110%
Soften skin in a portrait	Add 1-2px blur, then boost brightness to 105% and reduce contrast to 95%
Simulate cross-processed film	Rotate hue by 30-60 degrees, boost saturation to 140%, increase contrast to 120%

Why Does the Download Use PNG?

When filters are applied and the image is downloaded, the output is always PNG. PNG uses lossless compression, which means every pixel in the filtered result is preserved exactly. JPEG would re-compress the image with lossy compression, introducing artefacts - especially visible in areas where sharp filter adjustments (high contrast, heavy blur edges) create abrupt colour transitions. According to Google's WebP compression study, lossy formats like JPEG can reduce file size by 25-35% compared to PNG, but at the cost of pixel-level accuracy. For filtered images where the whole point is precise colour adjustment, lossless output is the right choice.

The trade-off is file size. A 12-megapixel photo saved as PNG can be 15-30 MB, compared to 2-5 MB as JPEG. If file size matters more than pixel accuracy, open the downloaded PNG in any image editor and re-save as JPEG or WebP at the desired quality level. For compressing images after filtering, the image compressor can reduce file size while preserving visual quality.

Filter Order Matters

CSS filter functions are applied in the order they appear in the filter string. The tool applies them in this fixed order: grayscale, sepia, blur, brightness, contrast, saturate, hue-rotate, invert. This order matters because each filter operates on the output of the previous one.

Worked example: Consider an image with brightness set to 150% and contrast to 50%. If brightness runs first, the image gets brighter, and then the contrast reduction flattens out the boosted highlights. If contrast ran first, the image would flatten to mid-tones and then brightness would lift everything uniformly - a noticeably different result. The fixed order in this tool ensures consistent, predictable output every time the same slider values are used.

Professional photo editors like Lightroom and Capture One also apply adjustments in a fixed pipeline order for the same reason. The difference is that those tools operate on raw sensor data with 12-14 bits per channel, while CSS filters work on standard 8-bit sRGB pixel values (0-255 per channel). For most web and social media use cases, 8-bit processing is more than sufficient.

Tips for Better Results

Start with brightness and contrast before touching colour filters. Getting the tonal range right first means saturation and hue adjustments will look more natural. Subtle changes usually look better than extreme ones - a 10-15% shift in saturation is often enough to make colours pop without looking artificial.

When creating black and white images, the grayscale filter alone often produces flat results. Boost contrast to 120-140% after applying grayscale to add depth. For the most natural-looking B&W conversion, set grayscale to 100% and then experiment with hue rotation before converting - rotating the hue shifts which colours appear lighter or darker in the greyscale version, similar to using colour filters on film cameras.

Blur is the most computationally expensive filter because it requires sampling many neighbouring pixels. For large images (over 4000px wide), high blur values can cause a brief delay when downloading. If the tool feels sluggish, try resizing the image first with the image resizer before applying filters.

If the image needs cropping before filtering, use the image cropper first and then upload the cropped version here. For extracting the dominant colours from a filtered image, the colour extractor can pull the palette after filters are applied.

Common Mistakes to Avoid

Over-saturating images is one of the most frequent editing mistakes. Pushing saturation above 150% makes skin tones look unnatural and can cause colour clipping, where distinct colours merge into a single solid block. If colours start looking neon or plastic, pull saturation back until individual shades are distinguishable again.

Another common issue is pushing contrast too high on photos with strong highlights. At 180-200% contrast, bright areas blow out to pure white and shadows collapse to pure black, losing all detail in those regions. The data in those clipped pixels is gone permanently in the downloaded PNG. A better approach is moderate contrast (110-130%) combined with a small brightness adjustment.

Applying blur and then increasing contrast can create visible halos around high-contrast edges in the image. This happens because the blur softens the edge, and then the contrast boost amplifies the gradual transition into a noticeable band. If halos appear, reduce either the blur or the contrast until they disappear.

Hue rotation at exactly 180 degrees combined with 100% invert produces an image that looks almost identical to the original but with slightly different colour channels. This is because invert flips all values and 180-degree hue rotation also flips the colour spectrum, so the two operations partially cancel each other out. It is not a useful combination for most editing purposes.

Sources

• MDN Web Docs - CSS filter property
• MDN Web Docs - CanvasRenderingContext2D.filter
• W3C - Filter Effects Module Level 1
• Wikipedia - Gaussian blur
• Google - WebP Compression Study
• Can I Use - CSS Filter Effects