CSS Filter Generator
filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) saturate(100%);The CSS filter generator combines six filter functions (blur, brightness, contrast, grayscale, hue-rotate and saturate) into a single rule, previewed on a gradient panel. Filter functions apply in the order written, so the same six values in a different order can produce a different image.
How it works
Each function takes the output of the previous one. Saturating and then desaturating does not cancel out, because the second operation works on the already-modified pixels.
- blur takes a length. Values above about 8px are expensive to composite on large elements.
- brightness, contrast and saturate take a percentage where 100% means unchanged.
- grayscale takes a percentage where 0% is unchanged and 100% is fully desaturated.
- hue-rotate takes an angle in degrees, rotating every hue around the colour wheel.
A filter creates a containing block for fixed-position descendants, in the same way transform does. That surprises people when a fixed header inside a filtered ancestor starts scrolling with the page.
Examples
A muted background treatment
Brightness
110%
Saturate
60%
Contrast
95%
Result
filter: blur(0px) brightness(110%) contrast(95%) grayscale(0%) hue-rotate(0deg) saturate(60%);
Lifting brightness while cutting saturation pushes an image back so overlaid text reads clearly, without the flat grey of a semi-transparent overlay.
Full desaturation with a hue shift
Grayscale
100%
Hue rotate
180deg
Result
filter: blur(0px) brightness(100%) contrast(100%) grayscale(100%) hue-rotate(180deg) saturate(100%);
The hue rotation has no visible effect here, because grayscale runs first and removes the colour that hue-rotate would have shifted. Reversing the order would change the result.
Frequently asked questions
Does the order of filter functions matter?
Yes. Each function operates on the result of the previous one, so grayscale followed by hue-rotate produces a grey image while hue-rotate followed by grayscale gives a different grey. This tool always writes them in a fixed order. Reorder them by hand if you need a different sequence.
What is the difference between filter and backdrop-filter?
filter affects the element and its contents; backdrop-filter affects whatever is behind it, leaving the element itself sharp. Frosted-glass panels need backdrop-filter, which the glassmorphism generator handles.
Why did my fixed-position element stop being fixed?
Because any non-none filter on an ancestor makes that ancestor a containing block for fixed descendants. The child then positions against the filtered element rather than the viewport. The same applies to transform, and it is a common cause of stuck headers.
Are CSS filters expensive to render?
Blur is, particularly at large radii on large elements, because it is composited every frame if anything animates. The colour functions are cheap by comparison. Avoid animating blur on anything full-screen.