CSS Filter Generator
What filter does
The filter property applies graphical effects to an element and everything inside it, in the order you list them. CSSGen.dev's filter generator combines blur, colour adjustments and drop-shadow into one declaration, and leaves out any function still at its default so the output stays short.
Syntax
filter: blur(<length>) brightness(<amount>) contrast(<amount>) grayscale(<amount>) hue-rotate(<angle>);| Part | What it controls |
|---|---|
| blur() | A Gaussian blur in length units. It spreads past the element's box, so allow room or it will be clipped by an overflow: hidden parent. |
| brightness() / contrast() | Multipliers where 100% is unchanged. Below 100% darkens or flattens; above lifts. |
| grayscale() / sepia() / saturate() | Colour treatments from 0% to 100%. saturate() can exceed 100% to push colour further. |
| hue-rotate() | Rotates every hue around the colour wheel by an angle, which recolours an image without touching its luminance. |
| drop-shadow() | Follows the alpha channel of the content, so a PNG cutout or an icon casts a shadow from its actual shape, not its box. |
| order matters | Filters apply left to right. blur() then brightness() looks different from brightness() then blur(). |
Notes from practice
drop-shadow beats box-shadow for cutouts
box-shadow traces the rectangular border box. filter: drop-shadow() follows the alpha of the content, so transparent PNGs, SVG icons and clipped shapes cast a shadow with the right outline.
filter creates a containing block
Any filter other than none makes the element a containing block for fixed and absolute descendants, and a new stacking context. A position: fixed child inside a filtered parent will anchor to that parent instead of the viewport.
It filters the element, not the backdrop
To blur what is behind an element while keeping its own content sharp you want backdrop-filter, which is what the Glassmorphism generator uses.
CSS Filter Generator FAQ
How do I blur an image in CSS?
Apply filter: blur(8px) to the image. The blur spreads outside the element's box, so if a parent has overflow: hidden the soft edge will be cut off — add a little padding or scale the image up slightly to hide the clipped edge.
What is the difference between filter: drop-shadow and box-shadow?
box-shadow follows the element's rectangular border box, including its border-radius. filter: drop-shadow() follows the alpha channel of the content, so a transparent PNG, an SVG icon or a clip-path shape casts a shadow in its real outline.
How do I make an image black and white in CSS?
Use filter: grayscale(100%). Any value between 0% and 100% gives a partial desaturation, which combined with a transition makes a smooth colour-on-hover effect.
Can I combine multiple CSS filters?
Yes — list them space-separated in one declaration and they apply left to right. The order changes the result, so filter: blur(4px) brightness(1.2) is not the same as filter: brightness(1.2) blur(4px).
Why does position: fixed stop working inside a filtered element?
Any filter other than none makes the element a containing block for fixed and absolutely positioned descendants. The fixed child then anchors to that element rather than the viewport. Move the fixed element outside the filtered parent.
Related generators
- Glassmorphism — Frosted glass with backdrop-filter. Blur and saturation act on whatever sits behind the card.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
- CSS Mask — Fade, spotlight or pattern an element away with gradient masks. Opaque pixels show, transparent pixels hide.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.