CSS Filter Generator — blur, brightness, hue-rotate, drop-shadow with live preview

Real-world use cases

• Build an Instagram-style photo filter for a gallery component

  You're styling a `<figure>` grid and want a consistent "warm vintage" treatment across every thumbnail. Start from the Vintage preset (sepia 45%, saturate 130%, contrast 95%, brightness 105%), then nudge sepia down to 30% in the preview until it reads "filtered" without looking yellow. Copy the `.box { filter: ... }` block, rename the class to `.thumb`, and drop it into your CSS. Because the preview uses a real gradient photo, you catch the over-saturation before it ships, not in QA on a real image.

• Make a disabled/loading state with grayscale + opacity

  A card needs a clearly "inactive" look while data loads. Set grayscale to 100% and opacity to 60%, leave everything else at default. The output is `filter: grayscale(100%) opacity(60%);` — one declaration you toggle with a `.is-loading` class. The live preview on the gradient card shows exactly how washed-out it reads, so you can dial opacity to the point where it's obviously disabled but the content is still legible.

• Recolor a single-color SVG icon set without editing the files

  You have a pack of black SVG icons and need them to match a teal brand color, but you can't edit the source. Combine invert, saturate and hue-rotate: invert(100%) to flip black→white, then saturate and hue-rotate to push toward teal, checking against the gradient text preview. It's a hack — for exact brand colors a recolor in the source is better — but for a quick theme match it's a copy-paste away, and the URL share link lets a teammate verify the exact angles you landed on.

• Add a soft logo shadow that follows the cut-out shape

  A transparent-PNG logo on a hero needs depth, but `box-shadow` would draw a rectangle behind the whole image box. Enable drop-shadow, set X 0 / Y 8 / blur 18, pick a dark brand color, and the preview shows the shadow hugging the logo silhouette. Copy `filter: drop-shadow(0 8px 18px #0a0e1a);` and the shadow tracks the actual alpha shape — exactly what box-shadow can't do.

• Tune a frosted-overlay look before wiring up backdrop-filter

  Before committing to a full glass panel, you want to see how much blur + brightness reads as "frosted" on your gradient. Use the Frosted preset (blur 4px, brightness 110%, saturate 120%) on the card target to judge the amount, then move the same numbers onto a `backdrop-filter` for the real panel. This tool gives you the fast visual read; the glassmorphism generator (linked below) builds the full backdrop-blur panel with the right fallbacks.

Common pitfalls

• Putting drop-shadow before the visual filters. Filter order matters: if you write `drop-shadow(...) blur(8px)`, the blur is applied to the already-shadowed result and smears the shadow too. Put visual adjustments first and the shadow last — this generator always emits drop-shadow at the end so the shadow is cast from the finished look.

• Using filter: blur() on a parent expecting only the background to blur. `filter: blur()` blurs the element and all its children, including text. If you want only what is behind a panel blurred (frosted glass), you need `backdrop-filter: blur()` instead. This tool generates `filter`; for the glass effect see the glassmorphism generator linked below.

• Assuming 100% always means unchanged. For brightness, contrast and saturate, 100% is the neutral baseline. But for grayscale, sepia and invert, 100% is the maximum effect and 0% is unchanged. Mixing these up — e.g. setting grayscale to 100 expecting a subtle effect — produces a fully desaturated image. Read the slider label and unit before copying.

Privacy