CSS Filter Generator

What is the CSS filter property?

filter applies graphical effects — blur, color adjustments, and more — directly to an element with a single line of CSS, no image editor or extra markup required. Multiple functions can be chained in one declaration, space-separated, and browsers apply them in the order they're written. It's widely used for hover effects, image treatments (grayscale galleries, sepia "vintage" looks), disabled-state styling, and quick brand-color tinting.

The nine filter functions this tool covers

• blur(px) — softens the element with a Gaussian blur. Larger values blur more.
• brightness(%) — scales luminance. 100% is unchanged, below darkens, above brightens.
• contrast(%) — scales the difference between light and dark areas. 100% is unchanged.
• grayscale(%) — desaturates toward black-and-white. 100% is fully grayscale.
• hue-rotate(deg) — rotates all hues around the color wheel by the given angle.
• invert(%) — inverts colors. 100% produces a photographic-negative effect.
• opacity(%) — makes the element translucent, like the opacity property but as a filter function (so it can be chained with the others).
• saturate(%) — scales color intensity. Below 100% mutes colors, above 100% makes them more vivid.
• sepia(%) — shifts the image toward a warm brown "old photograph" tone. 100% is fully sepia.

How to use this tool

1. Drag any slider to adjust that filter function — the generated CSS updates instantly as you go.
2. Combine several sliders to build a layered effect (e.g. a touch of sepia plus a contrast boost for a vintage look).
3. Leave a slider at its default (unchanged) position to skip that function entirely — the tool only writes functions that actually change the output, keeping the generated line short and readable.
4. Copy the generated CSS from the CSS box, or download it as a .css file, and paste it into your stylesheet or a <style> block. Apply it to any selector: .my-element { filter: ...; }.

Function order

When more than one filter is active, this tool always writes them in a fixed order — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — matching the order the sliders are laid out in the form. CSS applies chained filter functions left to right, so if you're hand-editing the output afterward, keep that in mind: reordering functions can change the visual result, particularly when blur is mixed with color adjustments.

FAQ

Why doesn't the output list every filter function every time? A filter left at its neutral value (brightness(100%), blur(0px), and so on) doesn't change how the element looks, so including it would just be noise. This tool omits no-op functions and falls back to filter: none; when every slider is at its default.

Can I animate or transition these filters? Yes — filter is animatable with CSS transition or @keyframes, which is a common way to build smooth hover effects (e.g. transition: filter 0.2s ease; alongside a :hover rule that swaps in a different filter value).

Does filter affect layout? No. Like transform, filter is purely visual — it doesn't reflow surrounding content, though a large blur can visually bleed outside the element's box.

Is filter supported in all browsers? Yes, unprefixed filter has full support in all modern browsers.

What's the difference between filter: opacity() and the opacity CSS property? They render the same visual result, but filter: opacity() composites with other filter functions in a single filter chain, while the standalone opacity property is a separate, simpler declaration. Use the plain opacity property unless you're already chaining other filters.

Privacy

Everything happens in your browser. No CSS, values, or settings you enter are ever sent to a server — the declaration is generated and updated locally as you adjust the sliders.