Tag: Photography

Image Filters Online: Free Browser Photo Effects [2026]

TL;DR: An online image-filter tool applies CSS-style adjustments — brightness, contrast, saturate, hue-rotate, blur, sepia, grayscale — and prebuilt presets (vintage, cool, warm, fade) to any photo, in your browser. Useful for quick blog hero images, social posts, and matching photos to a brand palette without opening Photoshop. Our free image filter tool runs the entire pipeline on the canvas in your browser, exports the filtered image as PNG/JPG/WebP, and copies the equivalent CSS filter declaration so you can apply the same effect live in your stylesheet.

Reaching for Photoshop or Lightroom for a quick photo tweak is overkill when all you need is a brightness boost, a sepia tint, or a quick fade for a blog header. Mobile apps like Snapseed and VSCO solve this on phones; the equivalent for desktop work is a browser tool with the same set of named effects. CSS specifies all the basic image filters — brightness(), contrast(), saturate(), blur(), sepia(), grayscale(), hue-rotate(), invert(), opacity(), drop-shadow() — and most browsers render them at GPU speed.

Our image filter tool exposes every CSS filter as a slider plus 24 prebuilt presets (vintage, cool, warm, fade, sepia, B&W, dramatic, polaroid, and more). Drop an image, drag sliders or click a preset, export the filtered image as PNG/JPG/WebP. The tool also outputs the equivalent CSS filter: declaration — useful when you want to apply the filter in CSS (live, no rendered file) instead of baking it into the image. This guide explains every filter, the preset presets, and the gotchas with hue-rotate and saturate that produce unexpected results.

All 10 CSS filter functions

Filter	Range	What it does
`brightness(0–2)`	0% to 200%+	Linearly scales the intensity of every pixel
`contrast(0–2)`	0% to 200%+	Spreads pixel values away from mid-grey
`saturate(0–2)`	0% to 200%+	0% = grayscale; 200% = oversaturated
`grayscale(0–1)`	0% to 100%	Mixes original and luminance-only versions
`sepia(0–1)`	0% to 100%	Brown-tinted aging effect
`hue-rotate(0–360deg)`	0° to 360°	Spins all colours around the colour wheel
`invert(0–1)`	0% to 100%	Inverts pixel values (negative effect)
`blur(0–20px)`	0px to 20px+	Gaussian blur — soften details
`opacity(0–1)`	0% to 100%	Fade entire image to transparent
`drop-shadow()`	x / y / blur / colour	Shadow that follows non-rectangular silhouettes

24 prebuilt presets — what each one does

Filters compose. Stacking contrast(110%) saturate(140%) sepia(20%) produces the “Polaroid” look. Our presets are tuned versions of those compositions:

Vintage: warm sepia with reduced saturation and slight contrast boost — instagram circa 2012
Cool: blue hue shift and increased contrast — winter photography
Warm: orange/yellow tint and slight saturation — sunset feel
B&W: grayscale with contrast boost — photojournalism look
Fade: reduced saturation and contrast — film fade
Sepia: classic 100% sepia tint
Polaroid: warm tint, soft contrast, slight grain
Dramatic: high contrast + saturation
Forest: green-shifted hue + saturation
Sunset: orange-shifted hue + warm tint
Night: deep blue + reduced brightness
Lo-fi: pixel-soft blur + saturation
… 12 more available in the dropdown

How to filter an image in your browser

Open the image filter tool
Drop an image (JPG, PNG, WebP, HEIC supported)
Click a preset to apply, or drag individual filter sliders
Watch the live preview update — every change is canvas-rendered in real time
Click Export for PNG/JPG/WebP at 1× / 2× / 4× resolution
Or click Copy CSS to copy the equivalent filter: declaration for live styling

CSS filter vs baked-in filter — when to pick which

Two output options matter for different workflows:

Bake into image: the filter is applied to the pixels, the image is exported as PNG/JPG. Use when you’re publishing to a CMS, social media, or anywhere the image lives independently of styling. The filter is permanent.
Copy as CSS: the original image stays untouched and you apply the filter via img { filter: contrast(120%) saturate(110%); } in your stylesheet. Use when you want one source image to render different ways across themes (light/dark mode, hover states, etc.). The filter is reversible — change the CSS and the image looks different without re-uploading.

For a photo gallery with hover effects, use CSS. For an image you’ll embed in a tweet or attach to an email, bake it in.

Common gotchas

Hue-rotate isn’t perceptually uniform. Rotating hue by 60° shifts red to yellow, but the same 60° shift from blue lands in purple — the wheel isn’t uniform. Use the visual preview, don’t pick angles by intuition.
Brightness above 100% can clip highlights. Once a pixel hits #FFFFFF it stops getting brighter, and details in the highlights are lost forever. Pull contrast down before pushing brightness up if you want to preserve detail.
Blur slows older devices. Gaussian blur with radius >10px on a 4000×3000 image can briefly stall the page on a 5-year-old mobile. Resize the image first if performance matters.
Grayscale isn’t desaturate. grayscale(100%) uses Rec. 709 luminance weights (red 21%, green 72%, blue 7%); saturate(0) uses an HSL-style desaturation. The two produce subtly different greys for the same input.
Drop-shadow follows transparency. Unlike box-shadow, drop-shadow() respects PNG alpha channels — perfect for product photos with transparent backgrounds. JPEG inputs don’t have alpha, so the shadow shows the rectangular outline.
Sepia at 100% destroys colour information. Once an image is fully sepia-toned, you can’t recover the original colours from the output. Always keep your original — bake the filter into a copy.

When NOT to use this tool

For photography retouching (skin smoothing, dodge/burn, layered adjustments), use Lightroom, Photoshop, or Affinity Photo — CSS filters can’t do localised edits. For colour grading a video sequence, use a video editor with proper LUT support (DaVinci Resolve, Premiere). For batch processing 100s of files, install sharp or ImageMagick and write a script — much faster than running each through a browser tool. For HDR or 16-bit colour work, browsers run filters in 8-bit RGB and can lose precision.

Frequently asked questions

Does this support PNG alpha channels?

Yes. PNG transparency is preserved through every filter. Drop-shadow specifically follows the alpha channel — useful for product photos on transparent backgrounds. JPEG inputs don’t have alpha; everything outside the photo is treated as fully opaque.

Can I export to WebP?

Yes — the export menu offers PNG (lossless, alpha), JPG (lossy, no alpha), and WebP (modern compression, alpha supported). Pick PNG for graphics with transparency, JPG for photos, WebP for the smallest file when modern browser support is acceptable.

Will the filtered output match what I see in CSS?

Yes — we use the same canvas filter API browsers use for the CSS filter property, so the rendered output is byte-identical to what your stylesheet would produce on a browser of the same version. Older browsers may render slight differences in blur kernels.

Can I apply multiple filters at once?

Yes — every slider is independent and they all stack. The preview shows the cumulative effect; the exported CSS lists each filter in order (filter: brightness(110%) contrast(120%) sepia(20%)). The order matters slightly — earlier filters are applied first.

Is my image uploaded?

No. The tool runs canvas filters in your browser. The image is loaded into a blob URL and processed locally — never uploaded.

What’s the resolution limit?

Effectively your browser’s available canvas memory. Desktop browsers handle 8000×6000 (48 MP) images comfortably; mobile is more limited (around 4000×3000). Heavy filters like blur slow down on large inputs — resize first if you don’t need full resolution.

Related tools and guides

May 9, 2026

Instagram Filters in CSS: Clarendon, Gingham, More [2026]

TL;DR: Instagram’s classic filters (Clarendon, Gingham, Moon, Lark, Reyes, Juno, etc.) can be approximated in CSS by stacking filter properties — contrast, saturate, hue-rotate, sepia — with carefully tuned values per filter. The output isn’t pixel-identical to Instagram’s proprietary algorithms, but it captures the look closely enough for previews, demo apps, and design mockups. Our free Instagram filters tool ships 30+ filter presets, applies them to any image in your browser, and copies the equivalent CSS.

Instagram launched its filter library in 2010, popularising the now-iconic looks: Clarendon (cool, high-contrast), Gingham (vintage warm), Moon (dramatic black-and-white), Lark (high-saturation outdoor), Reyes (faded warmth), Juno (warm and saturated). Instagram’s actual implementations are proprietary GPU shaders. CSS approximations using filter functions get close to the look — close enough that web designers use them to mimic Instagram’s aesthetic in their own UIs.

Our Instagram filters in CSS tool ships 30+ tested filter approximations. Drop an image, click a filter to preview, copy the CSS or export the filtered image as PNG. Useful for: feed-style mockups, photo galleries with consistent filter looks, hover effects that mimic Instagram, demo apps showing “before/after” filter comparisons. This guide explains how the CSS approximations work, where they fall short of Instagram’s real shaders, and the gotchas with hue-rotate.

CSS approximations of classic filters

Filter	CSS approximation	Aesthetic
Clarendon	`contrast(120%) saturate(125%)`	High-contrast cool tones
Gingham	`contrast(90%) brightness(105%) sepia(8%)`	Faded vintage warmth
Moon	`grayscale(100%) contrast(110%) brightness(110%)`	Dramatic B&W
Lark	`contrast(95%) saturate(110%) brightness(110%)`	Outdoor / nature
Reyes	`sepia(22%) brightness(110%) contrast(85%) saturate(75%)`	Faded warm
Juno	`saturate(130%) contrast(105%) hue-rotate(-10deg)`	Warm + saturated
Walden	`brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(160%)`	Bright yellow-tint
1977	`contrast(110%) brightness(110%) saturate(130%) sepia(50%)`	Faded film, retro

Why CSS approximations aren’t exact

Instagram’s filters are GPU shaders that operate per-pixel with custom curves, masks, and blend modes. CSS filter functions (contrast, saturate, hue-rotate, sepia) are simpler linear or per-channel transforms. The differences:

Tone curves: Instagram applies S-curves and custom tone-mapping that CSS can’t do directly. Our approximations use linear contrast/brightness, which gets close but not pixel-identical.
Per-channel adjustments: Real filters often boost reds and dampen blues separately. CSS can do hue-rotate (rotate all hues equally) but not selective per-color editing.
Lookup tables (LUTs): Many real filters use 3D LUTs to map every input color to an output color. CSS has no equivalent.
Blend modes: Instagram filters layer on tints with screen / multiply / overlay blend modes. CSS supports mix-blend-mode but only on stacked elements, not on the image itself directly.

For a 95% accurate match in the browser, our approximations are the practical limit. For pixel-exact reproduction, use a dedicated image-processing library (Pixi.js, GLFX) with custom GLSL shaders.

How to apply Instagram-style filters

Open the Instagram filters tool
Drop an image (or use one of the demo photos)
Click any filter preset to preview live
Adjust strength slider (0–150% — higher than 100% over-applies the effect)
Click Export to bake the filter into a PNG/JPG, or Copy CSS for the equivalent filter declaration

Common gotchas

The Instagram filter trademarks belong to Meta. Filter names like “Clarendon”, “Gingham”, “Moon” are Meta trademarks. Using them in your own product to label CSS approximations is legally grey — for commercial work, use generic names (“Cool”, “Vintage”, “B&W”) to avoid confusion. Our generator labels them with the recognisable names for educational reference.
Filters change Instagram’s CSS implementations evolve. Instagram has updated filter algorithms several times. Approximations that matched the look in 2018 may not match the 2026 version exactly.
Hue-rotate is unintuitive. Rotating hue by 10° shifts blue toward purple, but the same 10° from yellow lands in green. Test with the actual image — don’t pick angles by intuition.
Filters compound badly. Stacking 3+ filters at full strength produces over-processed output. Real Instagram filters are designed as single composites. Keep filter stacks short and adjust strength globally.
JPEG compression after filtering. Heavy filters (high contrast, high saturation) push pixels into JPEG’s compression-friendly bands, then JPEG compression can’t capture the subtleties. For high-quality output, export PNG and convert to JPEG only at the final step.
CSS filter is render-time, not destructive. Applied via CSS filter: declaration, the original image stays unchanged in the DOM. Apply via canvas (the export path) when you want a permanent change.

When NOT to use CSS Instagram filters

For pixel-exact recreation of Instagram’s filters (e.g., for a competitive analysis), you need either Instagram itself or a dedicated GLSL implementation — CSS can’t reach that fidelity. For commercial product features (“apply Instagram filter to your photo”), use proper trademark-friendly names and don’t mention “Instagram” in your UI without licensing. For batch image processing in CI, use sharp + custom transforms in Node — much faster than running through a browser tool. For animated filter transitions (smoothly cross-fading between filters), use CSS transitions on the filter property — works but limited to functions CSS supports.

Frequently asked questions

Are these the actual Instagram filters?

No — they’re CSS approximations. Instagram’s real filters are proprietary GPU shaders. Our CSS combines contrast, saturate, hue-rotate, sepia, etc. to match the look. Visually similar; not pixel-identical.

Can I use the filter names commercially?

“Clarendon”, “Gingham”, “Moon” etc. are Meta trademarks. For commercial products labelling filter options, use generic names (“Cool”, “Vintage”) to avoid trademark issues. The CSS techniques themselves are open and free to use.

Does it support PNG transparency?

Yes — PNG alpha channels survive every filter. Drop-shadow specifically uses the alpha channel for the silhouette. JPEG inputs don’t have alpha; the rectangular bounding box shows in any drop-shadow.

Can I apply filters in CSS without baking them in?

Yes — that’s the use case for the “Copy CSS” option. Apply via img { filter: contrast(120%) saturate(125%); } in your stylesheet, and the original image stays untouched. Use baking (PNG export) when you want the filter permanent.

Is my image uploaded?

No. Filters apply via canvas in your browser. The image is loaded into a blob URL and processed locally.

Can I create a custom filter?

Yes — use the “Custom” mode and adjust each CSS filter function manually with sliders. Save your settings as a named preset. Useful for matching a brand-specific look across many images.

Related tools and guides

May 5, 2026

Blur Face Online: Photo Censor in Browser [2026]

TL;DR: A photo censor tool covers sensitive parts of a photo — faces, license plates, addresses, screen content — with one of three opaque overlays: pixelation (mosaic blocks), gaussian blur, or black bar. Use a black bar for legal redaction, pixelation for casual face blurring, blur only when readability of the underlying region doesn’t matter. Our free photo censor runs in your browser, supports all three modes, and strips EXIF metadata from the export so location and camera data don’t leak.

Posting a photo online without thinking about who’s in it has become a privacy concern even for casual users. A vacation snap shows a stranger’s child clearly enough to identify them. A street photo includes a license plate. A screenshot of a calendar exposes a colleague’s home address. The fix is mechanical: cover the sensitive region with an opaque overlay before publishing. Done in two minutes; the alternative is removing the photo after someone complains.

Our photo censor handles all three common censoring modes — pixelate, blur, black bar — and lets you brush, drag a rectangle, or click a face for an automatic ellipse. Files never upload — the photo loads into your browser, gets edited locally, and exports with EXIF metadata stripped. This guide covers when to use which mode, the irreversibility of pixelation vs blur, and the photographic gotchas (low-resolution faces, low-blur radius) that have leaked private information in the past.

Censor mode comparison — and which to actually use

Mode	Reversible?	Best for
Black bar	No	Legal redaction, license plates, sensitive text
Pixelate (block 12+)	No (irreversible at high enough block size)	Faces in social photos, casual blurring
Gaussian blur	Partially (low blur is recoverable)	Aesthetic blurring where a black bar would clash
Solid color	No	Branded redactions, dark backgrounds
Sticker / emoji overlay	No	Casual social posts, fun reveals

The pixelation problem — when blurring isn’t enough

Light pixelation can be reversed. Researchers at Cornell in 2016 demonstrated that “mosaic” pixelation with a small block size can be reverse-engineered using machine learning to identify the original face — particularly if you have other photos of the same person to train on. The defence is simple: use a large enough block size that the original information is genuinely destroyed.

Block size 4–8: trivially reversible. Don’t use for privacy.
Block size 12–18: safe for casual social posts; very hard to reverse without targeted ML.
Block size 24+: unrecognisable; safe for sensitive contexts.
Black bar: impossible to reverse — the data is gone, not blurred.

For genuinely sensitive content (legal redaction, evidence handling, witness protection), use a black bar. For “I don’t want this person identified by a casual viewer”, pixelation at block 18 is enough.

How to censor a photo in your browser

Open the photo censor
Drop your image (JPG, PNG, WebP, HEIC supported)
Pick a mode: Pixelate, Blur, Black bar, Color block, or Sticker
Use the rectangle tool, brush, or “click to detect face” mode to select the region
Adjust block size or blur radius — preview updates live
Click Export. The exported image has EXIF metadata stripped (no GPS, camera serial, or timestamp)

EXIF metadata — the hidden privacy leak

Every JPG and HEIC photo from a phone or camera includes EXIF metadata: latitude/longitude (if location was on), camera model, lens, exposure settings, sometimes the camera’s serial number. A photo posted to a forum or sent in an unencrypted message can leak the exact GPS coordinates of where it was taken. Pixelating a face does nothing about EXIF.

Our exporter strips EXIF by default — the saved image has no location, no camera serial, no timestamp beyond the file’s own modified time. If you want to keep EXIF (e.g. for archival), toggle “Preserve EXIF” before export. Most platforms (Twitter, Discord, Reddit) strip EXIF on upload anyway; some (Slack file shares, email attachments, direct downloads) do not.

Common gotchas

Low-resolution selections leak through pixelation. If your photo is 4000×3000 and the face is 200×200 pixels, pixelation at block 18 turns that face into 11×11 visible blocks — recognisable to anyone who knows the person. Use block 24+ or scale up the source image first.
Reflections and shadows. Censoring a face but leaving a reflective surface (window, mirror, sunglasses) where the face is also visible defeats the purpose. Censor every visible instance.
Tattoos, scars, and unusual clothing identify people. A face-blurred photo where the subject has a distinctive tattoo or coat is still identifiable to anyone who knows them. Consider blurring or cropping those features too.
License plates have a smaller resolution than faces. A car plate at 80×30 pixels needs a smaller block size to look natural while still being unreadable — block 6–8 typically. Blurring a plate by mistake at face-block-size washes out the whole car.
Screen content reflected on a face. Photos of someone looking at a phone often reveal app content reflected on their glasses. The pixelation needs to cover both the screen and the eyes.
Don’t rely on overlay alpha. A semi-transparent blur overlay still passes through detail. Use full-opacity overlays for any actual privacy protection.

Legal context: when redaction is required

Several scenarios require censoring before publication:

EU GDPR: photos showing identifiable people require their consent for publication — censoring removes the identifiability.
HIPAA (US healthcare): patient photos must redact 18 specific identifiers including face, full-body view, distinctive marks, and any identifiers in background text.
Court-ordered redaction: evidence photos in some jurisdictions must redact identifying information of minors, witnesses, or jurors.
Press ethics: news organisations often blur the faces of bystanders, accident victims, and minors — a black bar or full pixelation, never a thin blur.

For any legal-grade redaction, use the black bar mode. Pixelation is partial protection at best; lawyers and regulators want the data gone, not just hidden.

When NOT to use this tool

For redacting text in PDFs, use a PDF-aware redaction tool — pixelating text in a PDF doesn’t remove the underlying text from the PDF stream, so the redacted text is recoverable by anyone with a PDF reader. For batch automation (censoring 100s of photos with the same regions), use a Python script with OpenCV or Pillow. For video face-blurring (e.g., bystanders in a YouTube vlog), use a video editor with face-tracking — this tool is for static images only.

Frequently asked questions

Is pixelation reversible?

Light pixelation (block 4–8) can be reverse-engineered using ML models, especially if other photos of the same subject exist. Block 18+ is safe for social use; block 24+ is unrecognisable. For genuinely sensitive content (legal redaction), use a black bar — the underlying data is gone, not just hidden.

Does censoring strip EXIF data?

Yes by default — the exported image has no GPS coordinates, camera serial, or original timestamp. Toggle “Preserve EXIF” before export if you want to keep that metadata (rare; usually a privacy mistake).

Can I use this for legal redaction?

For legal-grade redaction, use the black bar mode — the underlying pixel data is replaced, not transformed. Pixelation and blur are partial protections at best. Always check with a legal professional for high-stakes redaction (court evidence, regulated healthcare records).

What’s the difference between blur and pixelate?

Blur smooths the region using a gaussian filter; pixelate replaces it with a mosaic of solid blocks. Blur looks more natural in photos; pixelate looks more “censored” but is harder to reverse-engineer at high block sizes. For privacy, pixelate at block 18+ wins; for aesthetic blurring, gaussian blur looks better.

Is my photo uploaded?

No. The censor runs in your browser using the canvas API. The photo is loaded into a blob URL in your tab and never leaves your device. The exported image is generated locally — you can verify with DevTools’ Network tab.

Can the tool detect faces automatically?

Yes — toggle “Auto-detect faces” and the tool runs an in-browser face detection model on the image. Detected faces appear as ellipses you can accept, edit, or remove. Detection is good but not perfect; always verify each face is covered.

Related tools and guides

May 4, 2026