CSS Filter Generator Online

How to Generate CSS Filter Code Online

1. Pick a Filter Function: Choose from blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, or chain several. The generator emits a single filter: declaration with the functions in the order you add them — order matters, because each function operates on the pixels produced by the previous one.
2. Adjust Values with Sliders: Set the strength for each function — blur in pixels (e.g., 4px), hue rotation in degrees (0deg–360deg), and the normalized filters (brightness, contrast, grayscale, invert, opacity, saturate, sepia) by percentage or unitless number (1 = 100% = no change). For drop-shadow, configure offset-x offset-y blur color (no spread or inset keyword — those are box-shadow only).
3. Preview on a Sample Image: Watch the live preview update as you drag sliders. Swap in your own image to verify the effect on the actual asset you ship — a frosted hero photo, a duotone product shot, or a desaturated thumbnail behaves differently from the default sample.
4. Copy the CSS: Click "Copy" to grab the generated filter: rule and paste it into your stylesheet, a CSS-in-JS object, or a style="" attribute. Everything runs client-side — no upload, no sign-up, no account.

Why Use a CSS Filter Generator?

The CSS filter property has been baseline since Chrome 18 (2012), Safari 6 (2012), and Firefox 35 (2015), and Edge picked up the standard syntax in version 79 (Jan 2020 with the Chromium switch). It now covers ~96% of global browsers per caniuse. Composing the right filter chain by hand means remembering ten function syntaxes and three different value systems (length, angle, normalized number) — a visual generator with live preview saves the round-trips through DevTools.

• Frosted glass and duotone effects — blur(10px) saturate(180%) on a translucent card, combined with backdrop-filter for the well-known iOS-style frosted nav bar.
• Image hover treatments — grayscale(100%) then transition: filter 200ms to fade thumbnails to color on hover. Filters are interpolable as a function list, so transitions are smooth when the chain length matches on both sides.
• Dark-mode image fixes — invert(1) hue-rotate(180deg) is the classic trick for inverting screenshots without flipping their accent colors, used by docs sites that ship light-only artwork.
• Accessibility simulations — grayscale(100%) simulates monochromacy and hue-rotate(180deg) saturate(0) approximates colorblindness checks while you audit a design.
• Photo-style presets — Stack sepia(0.3) contrast(110%) brightness(105%) for a warm vintage look, or saturate(0) brightness(110%) contrast(120%) for a high-key black and white. The generator lets you dial each layer in without re-running the build.
• SVG-shaped drop shadows — drop-shadow() follows the alpha channel of PNGs and SVGs, so a logo with transparent corners gets a real outline shadow instead of the rectangular box box-shadow would draw.

If you ship vector art, convert sources first with Image to SVG or pick colors with the Color Converter before plugging them into the filter chain.

CSS Filter Functions Reference

Function	Syntax	Range	Default (no change)	Notes
blur()	blur(<length>)	≥ 0px	0	Gaussian blur; cost scales with radius and surface area
brightness()	`brightness(	)`	≥ 0	1 / 100%
contrast()	`contrast(	)`	≥ 0	1 / 100%
drop-shadow()	drop-shadow(<offset-x> <offset-y> [<blur>] [<color>])	offsets any length, blur ≥ 0	n/a	No spread, no inset; respects element alpha
grayscale()	`grayscale(	)`	0–1	0
hue-rotate()	hue-rotate(<angle>)	any deg/rad/turn	0deg	360deg returns to identity
invert()	`invert(	)`	0–1	0
opacity()	`opacity(	)`	0–1	1
saturate()	`saturate(	)`	≥ 0	1 / 100%
sepia()	`sepia(	)`	0–1	0
url()	url("file.svg#filter-id")	n/a	n/a	Reference an SVG <filter> for effects beyond the ten built-ins

Multiple functions chain space-separated: filter: contrast(110%) brightness(105%) saturate(120%);. They apply left to right.

filter vs backdrop-filter

Property	What it filters	Needs translucent background?	Baseline support
filter	The element and its children (the foreground)	No	Chrome 18 (2012), Safari 6 (2012), Firefox 35 (Jan 2015), Edge 79 (Jan 2020)
backdrop-filter	The painted backdrop behind the element	Yes — element must be partly transparent or you see nothing	Safari 9 (Sep 2015, -webkit- prefix), Chrome 76 (Jul 2019), Edge 17 (Apr 2018), Firefox 103 (Jul 2022)

Practical rule: use filter: blur() to blur an image; use backdrop-filter: blur() plus a rgba(...) or low-alpha background to blur whatever sits underneath a card, modal, or sticky nav. Stacking many large-radius backdrop-filter blurs hurts paint time on mobile GPUs — keep the radius modest (≤16px) and avoid layering several blurred surfaces in the same scroll region.

Frequently Asked Questions

What is the difference between filter and backdrop-filter?

filter modifies the element it is applied to — the image, text, or DOM subtree inside that box. backdrop-filter modifies the backdrop: whatever is painted underneath the element, visible only because the element's own background is translucent. Frosted-glass cards use both ideas — a semi-transparent background plus backdrop-filter: blur() for the blurred view through. If you give the element an opaque background, backdrop-filter has no visible effect because the backdrop is hidden.

Does the order of filter functions matter?

Yes. Filters are applied left to right, and each one operates on the pixels produced by the previous step. filter: hue-rotate(180deg) drop-shadow(0 0 10px red) shifts the element's hue first, then draws a red shadow on the recolored shape. filter: drop-shadow(0 0 10px red) hue-rotate(180deg) draws the red shadow first, and the hue rotation then shifts both the element and that shadow toward cyan. Swap two functions and you can get a meaningfully different result.

Do CSS filters trigger a GPU compositing layer?

Yes — any non-none filter value promotes the element to its own composited layer, the same way transform: translateZ(0), opacity < 1, and will-change do. That makes filter changes cheap to animate (no full repaint) but adds memory and compositing cost. blur() and drop-shadow() are the most expensive because the GPU must sample neighboring pixels; opacity(), grayscale(), and invert() are pixel-local and much cheaper. For animations, prefer transitioning the filter on a small, isolated element rather than a full-screen container.

Can I animate CSS filters with transition or @keyframes?

Yes. filter is animatable as a "filter function list" — if both sides of the transition have the same function list, each function interpolates individually (blur(0) → blur(8px) smoothly fades in the blur). If the lists differ in length, missing functions fall back to their defaults and the rest still interpolate. If one side is none, the engine treats it as the other side's list at default values. To animate cleanly, write transition: filter 200ms ease; and keep the chain order consistent between states.

What can SVG filter references (url(#filter-id)) do that the built-in functions cannot?

A lot. The ten CSS functions are sugar over a small subset of SVG filter primitives. With an SVG <filter> you get feTurbulence (procedural noise), feDisplacementMap (warp), feConvolveMatrix (custom kernels for sharpen, emboss, edge detect), feColorMatrix (arbitrary color transforms — useful for colorblindness simulations and brand-locked duotones), and feMorphology (dilate/erode). Reference one from CSS with filter: url("filters.svg#my-filter");. The trade-off is no live-tweakable parameters from the cascade — you change the SVG.

How is filter: drop-shadow() different from box-shadow?

box-shadow paints a shadow around the element's CSS box — the rectangular border-box. A PNG of a circular logo gets a square shadow. drop-shadow() is a filter that samples the actual rendered alpha channel of the element, so transparent areas in a PNG, an SVG icon, or a CSS shape produce a shadow that hugs the visible silhouette. drop-shadow also has no spread parameter and no inset keyword. Use drop-shadow for PNG and SVG with transparency; use box-shadow for rectangular cards, buttons, and elements where the box itself is the visible shape.

Will CSS filters work on text, form controls, and iframes?

Filters work on most elements, including text. filter: blur(2px) on a <p> blurs the rendered glyphs (useful for spoilers or paywalled previews). Form controls render through the OS in some browsers, so results can be platform-specific — test on the targets you care about. Filters apply to iframes and their painted content, but cross-origin frames still respect their own origin's restrictions for what the page can read back; the filter is a presentational effect, not a way to inspect frame pixels.

Why does my element disappear or clip when I add a filter?

Two common causes. First, any non-none filter creates a new stacking context and a containing block for position: fixed descendants — a fixed child of a filtered ancestor scrolls with the ancestor instead of the viewport. Second, the filter region is computed from the element's geometry; large blur or drop-shadow values can extend the painted area, and a tight parent with overflow: hidden will clip the soft edge of the shadow or blur. Loosen the parent's overflow or move the filter to an inner wrapper to avoid the clip.

Is the generated CSS safe to ship to production?

Yes. The output is plain standards-track CSS — no vendor prefixes are required for filter itself on any supported browser since Edge 79 (Jan 2020). For backdrop-filter, Safari still benefits from the -webkit-backdrop-filter prefix for older iOS versions, though current Safari accepts the unprefixed form. If you need to support Safari 14 and earlier, include both declarations.