Image Filters

Click or drag to upload

JPG / PNG / WEBP / GIF

Upload image to preview here

Apply 8 professional image filters online: grayscale, sepia, invert, blur, brightness, contrast, saturation, and hue rotation — each with 0-200% intensity, real-time preview.

Image Cropper

Image Watermark

Image Compressor

Image Converter

ICO Generator

What are image filters?

Image filters are a set of techniques that map pixel values to new pixel values through mathematical transformations. On the web and mobile, the most common standard is the CSS filter property (blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert). This tool is built on the same set of APIs in Canvas, so filters can be stacked with one click.

**How is this different from a photo editor?** Pro editors (Photoshop, Lightroom) support local brushes, layers, and masks. This tool handles whole-image color grading and batch-style filter application. It is lighter, faster, and a better fit when you do not need fine local edits.

**Grayscale vs sepia:** Grayscale unifies RGB using perceived luminance (ITU-R BT.601 weighting), removing all color. Sepia layers a brown tint on top of grayscale, producing a stronger nostalgic feel.

**Why can so many effects stack without distortion?** Filters are per-pixel math, so they never alter the pixel structure. Any combination within 0-200% strength keeps the image intact, though the result can become dramatic. Try in small steps.

Use Cases

Quickly fix underexposed or flat-color photos using brightness, contrast, and saturation
Add vintage, black-and-white, or invert art styles to personalize social media images
Unify color tone or beautify e-commerce product shots and detail-page assets
Adjust saturation and color tone for ID photos, avatars, or portrait backgrounds
Apply invert effect to design sketches or UI screenshots for visual testing
Use the blur filter to mask privacy details (phone numbers, addresses) in screenshots

How to Use

Upload the image you want to filter (JPG, PNG, WEBP, or GIF)
Choose from 8 base filters in the left thumbnail grid: grayscale, sepia, invert, blur, brightness, contrast, saturation, hue rotation
Drag the intensity slider for fine control (0% off, 100% standard, 200% maximum) and see the live preview
Stack additional filters by switching to other effects and adjusting their intensity to compose the ideal look
Click the download button to export as PNG; the filename is automatically suffixed with _filtered

Features

8 built-in effects: grayscale, sepia, invert, blur, brightness, contrast, saturation, hue rotation
0-200% intensity: every filter has its own slider, 100% is standard, 200% is maximum
Real-time preview: changes apply instantly, what you see is what you export
All major formats: works with JPG, PNG, WEBP, GIF and other common image types
One-click reset: clear all filters to compare original vs filtered side by side
Local processing: all effects run in browser Canvas, files never leave your device

Best Practices

Grading order: exposure first, color next, style last

Recommended workflow: adjust brightness and contrast to fix exposure first, then saturation to fix color, then add stylistic filters like grayscale, sepia, or hue rotation. This matches the Photoshop logic and prevents strong style filters from masking exposure issues at the start.

Start the intensity slider at 50%, do not jump to 200%

Most filters look best in the 50-150% range. Jumping straight to 200% often causes saturation clipping, hue distortion, or excessive blur. Start at 100% to evaluate, then fine-tune within ±20% to taste.

Keep saturation around 100-150% to avoid color clipping

Saturation above 150% makes reds and yellows bleed and lose detail. Above 200%, the result can show irreversible color blocks. The 0-200% range is designed for creative effects; for daily grading, 80-130% is the sweet spot.

Grayscale plus moderate contrast equals classic photojournalism

Pure grayscale can look flat. Try grayscale 100% plus contrast 110-130% plus a small brightness tweak (based on the source exposure). This combination mimics the film-era documentary style and was the most popular black-and-white recipe on early Instagram.

Use sepia for old photos and nostalgic themes, not modern product shots

Sepia's brown tone heavily shifts the color palette, so it fits nostalgia, documentary work, and video thumbnails. For e-commerce hero images, UI screenshots, or tech product photos, sepia makes the product look dated and unprofessional, breaking the realism of the merchandise.

Blur strength above 30 already produces a clear bokeh effect

The blur slider's 0-200% maps to a 0-20px blur radius. Strength 30 (3px) gives a subtle softness. Strength 50 (5px) works well for fake background bokeh. Strength 100 (10px) or higher is good for masking private information or for portrait subject isolation.

Hue rotation at 0, 360, or 720 all return to the original color

Hue is a circular color space. The 0-200 strength maps to 0°-360° rotation. Strength 100 equals 180° (complementary color), 200 returns to the original. For creative grading, stay in the 10-30 strength range; above 50 dramatically shifts the natural color of objects.

After grading, run an image compressor to shrink the file size

This tool exports lossless PNG, which can be large. For web pages, email attachments, or social media uploads, follow up with an image compressor — you can typically shrink 50-80% of the size without visible loss by converting PNG to JPG.

FAQ

What image filters are available? Can I do black and white or vintage?

Eight built-in professional effects: grayscale, sepia, invert, blur, brightness, contrast, saturation, and hue rotation. Click to switch and create vintage, artistic black-and-white, or dreamy blur looks. Every filter supports 0-200% intensity, where 1% shows subtle changes, 100% is the standard, and 200% is the maximum.

Can I make a filter effect stronger or weaker?

Yes. Each filter has an independent intensity slider. 0% equals off, 100% is standard, 200% is maximum. For example, saturation at 50% only slightly boosts vibrancy, 150% gives an instant film look. Hue rotation at 50 is 90° rotation, 200 brings the color back to original.

My photo is too dark or colors look flat. Can this tool fix that?

Yes, it is a great fit. Brightness can rescue underexposed overcast photos. Contrast adds depth to flat images. Saturation restores faded old photos. Combined with hue rotation, you can shift warm/cool tones, create moody dusk blue looks, or vibrant neon cyber styles.

Can I stack multiple filters?

Yes. You can apply multiple filters to the same image — for example, light sepia plus brightness plus high contrast plus high saturation to find a consistent brand tone. Since filters are per-pixel math, combinations do not damage the image structure, but the result may look more dramatic, so adjust in small steps.

What image formats are supported? How do I save the result?

Full support for JPG, PNG, WEBP, and GIF. During processing you see a real-time preview. When satisfied, click download to export as PNG (lossless, larger size). For smaller JPG files, use this tool for color grading then run an image compressor on the output.

Is it safe to apply image filters online? Will my photos leak?

Absolutely safe. All image processing happens locally in your browser via the Canvas filter API. No files are uploaded to any server, no software to install. Even family photos, contract scans, and ID photos can be processed safely — closing the browser frees memory instantly.

Will color grading change the file size?

Yes, slightly. Brightening, increasing contrast, or boosting saturation can grow the file a bit. Darkening, going grayscale, or applying sepia removes high-frequency details and may shrink the file. To reduce size further, run an image compressor after color grading — grade first, compress second is the standard workflow.

What is the difference between grayscale and sepia?

Grayscale unifies RGB using perceived luminance (ITU-R BT.601 weighting: Y = 0.299R + 0.587G + 0.114B), removing all color. Sepia adds a brown tint on top of that grayscale base, simulating the chemical toning of 19th-century photos and giving a stronger nostalgic feel.

Glossary

CSS filter: A CSS property providing browser-native image filters: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia. This tool implements the same set via the Canvas filter API.
Sepia tone: A classic vintage look that mimics the chemical toning of 19th-century photos. RGB matrix: R = 0.393R + 0.769G + 0.189B; G = 0.349R + 0.686G + 0.168B; B = 0.272R + 0.534G + 0.131B.
Hue rotation: A circular rotation of the H (hue) channel in the HSL color space. A 360° rotation returns to the original color. The tool's 0-200% strength maps to 0°-360° rotation.
BT.601 weighting: The luminance formula from ITU-R BT.601: Y = 0.299R + 0.587G + 0.114B. Grayscale filters and TV signals use this weighting because it better matches the human eye's higher sensitivity to green than a plain average.
Exposure: The total amount of light captured by a photo. Underexposed = too dark; overexposed = too bright. Brightness filters can compensate, but they cannot recover highlight detail that is already clipped.
Saturation: The intensity of color. 0% = full grayscale; 100% = original color; >100% = boosted. Too high saturation causes color clipping and detail loss.

8 built-in filters at a glance

Filter	Algorithm / implementation	Typical use
Grayscale	`R=G=B=0.299R+0.587G+0.114B`	Documentary, art, vintage theme
Sepia	`Classic Sepia Tone matrix`	Nostalgia, old-photo look, video thumbnail
Invert	`255 minus original for each RGB channel`	X-ray, art poster, dark UI
Blur	`Canvas filter: blur(radius)`	Background bokeh, focus, privacy mask
Brightness	`Offset added to RGB`	Under/overexposure fix, brighten overcast
Contrast	`(RGB-128) × factor + 128`	Flat photo depth, HDR style
Saturate	`Scale S channel in HSL`	Boost vibrancy, restore faded, brand color
Hue rotate	`Rotate H channel in HSL`	Creative color shift, color swap, visual test

Filter intensity slider 0-200% effect reference

Strength	Visual effect	Recommended use
`0%`	Fully off, equivalent to original	Reset, A/B test
`1-30%`	Very subtle, almost invisible	Fine-tune, requires close look
`30-70%`	Light effect	Daily photo color grading
`100%`	Standard strength	Default for most scenarios
`130-170%`	Enhanced effect	Stylized work, brand color consistency
`200%`	Maximum effect	Artistic, abstract processing