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

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

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

1. Open the Instagram filters tool
2. Drop an image (or use one of the demo photos)
3. Click any filter preset to preview live
4. Adjust strength slider (0–150% — higher than 100% over-applies the effect)
5. 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

• Instagram Filters in CSS
• Image Filters (general)
• Image Color Extractor
• Instagram Post Generator
• All social media tools