CSS Filter Generator
Adjust blur, brightness, contrast, grayscale, hue-rotate and more — live preview updates as you move sliders. Copy the filter CSS with one click.
CSS generated is free to use — no attribution required.
How do you use the CSS filter generator?
Move the slider for each filter function and watch the preview update. Only values that differ from the default end up in the generated CSS — if brightness sits at 100 percent it is left out entirely, because brightness(100%) does nothing and only makes the declaration longer.
What is the CSS filter syntax?
The property takes a space-separated list of filter functions, applied left to right: filter: blur(4px) brightness(110%) contrast(120%). There are no commas — a comma is a syntax error here and will invalidate the whole declaration. Setting filter: none removes any inherited or previously set filter.
What are the available CSS filter functions?
blur(px) applies a Gaussian blur. brightness(%) adjusts lightness, where 100% is the original and 0% is black. contrast(%) pushes tones towards or away from mid grey. grayscale(%) desaturates. hue-rotate(deg) rotates every color around the color wheel. invert(%) flips the colors. opacity(%) fades the element. saturate(%) intensifies or mutes color. sepia(%) applies a warm tone. drop-shadow() casts a shadow that follows the element outline.
Percentages and decimals are interchangeable for the proportional functions: grayscale(100%) and grayscale(1) are the same thing. Several of them also accept values above 100% to push past the original.
Does the order of CSS filter functions matter?
Yes, and this is the single most common source of confusion. Each function receives the output of the one before it, so filter: blur(4px) brightness(150%) brightens an already-blurred image, while filter: brightness(150%) blur(4px) blurs an already-brightened one. The two produce visibly different results.
The effect is most obvious when you combine blur() with anything that changes tone, and when drop-shadow() is in the list — a drop shadow placed first traces the original shape, whereas one placed after a blur traces the blurred, softened silhouette.
What is the difference between filter and backdrop-filter?
filter processes the element and its contents. backdrop-filter leaves the element alone and processes everything painted behind it, which is what produces frosted-glass panels, translucent navigation bars and modal overlays.
The catch is that backdrop-filter does nothing visible unless the element is at least partly see-through. A fully opaque background covers the blurred backdrop completely, so pair it with a translucent background such as rgba(255,255,255,.6) and let the blur show through.
How does filter: drop-shadow() differ from box-shadow?
box-shadow follows the border box, rounded corners included, and knows nothing about what is drawn inside it. drop-shadow() works from the rendered alpha channel, so it traces the actual visible shape — the transparent parts of a PNG, the polygon left by a clip-path, or a pure-CSS triangle.
That makes drop-shadow() the right choice for any non-rectangular element and the wrong choice for a plain card, where box-shadow is cheaper and offers a spread value and an inset keyword that drop-shadow() does not have.
Why does filter break position: fixed inside an element?
Because any filter other than none makes the element a containing block for its absolutely and fixed-positioned descendants. A child with position: fixed inside a filtered ancestor stops being positioned relative to the viewport and starts being positioned relative to that ancestor, so fixed headers, modals and dropdowns suddenly scroll away or clip.
A filter also creates a new stacking context, which can reorder how z-index resolves between the filtered element and its siblings. Neither behavior is a bug, and neither is avoidable while the filter is applied — if a filtered wrapper is breaking a fixed child, move the filter onto a different element rather than trying to work around it.
How do you animate CSS filters without hurting performance?
Filters animate smoothly, but not all of them cost the same. opacity() is close to free; blur() is the expensive one, because the browser re-rasterizes a Gaussian blur on every frame and the cost scales with both the radius and the area being blurred.
Keep animated blur radii small, keep the blurred element small, and prefer transitioning a filter on a compact overlay rather than on a full-page container. Adding will-change: filter ahead of the animation lets the browser promote the layer in advance, but leave it on permanently and you trade the stutter for sustained memory use.
What is the browser compatibility for CSS filter?
The filter property and all of its functions are supported unprefixed in every current browser; the -webkit-filter prefix has not been necessary since Safari 9.1 and is safe to drop from old stylesheets. backdrop-filter is the one to check rather than assume — it arrived considerably later and is still worth guarding with a @supports (backdrop-filter: blur(1px)) query when the design depends on it.