CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
Design & SEO
CSS Filter & Glass Generator
Blur, glass, duotone and filter effects with live preview and CSS.
What it does. CSS filters apply visual effects to an element without touching the image file. This generator covers blur, brightness, contrast, saturation, hue rotation, grayscale, sepia, invert and drop-shadow, plus backdrop-filter for glassmorphism, with a live preview over real content.
Runs in your browserNothing uploadsNo signupWorks offline
How to use CSS Filter & Glass Generator
- Choose a preset or start from scratch, then adjust the sliders.
- Toggle between filter (affects the element) and backdrop-filter (affects what is behind it).
- Copy the CSS. Filters compose in order, so the sequence matters.
filter versus backdrop-filter
filter applies to the element and its contents. backdrop-filter applies to whatever is behind the element, showing through it.
That difference is the whole of glassmorphism. A frosted panel is a semi-transparent background plus backdrop-filter: blur() — the panel itself stays sharp while the content behind it blurs. Using filter: blur() instead blurs the panel’s own text, which is not the effect anyone wants.
The recipe that works:
background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(255,255,255,0.14);
The saturation boost matters more than it looks — blurring alone desaturates the backdrop and the panel reads as grey and dead. The hairline border is what separates the panel from its background and gives it an edge.
What each filter does
| Filter | Range | Effect |
|---|---|---|
| blur(px) | 0 to ~40px | Gaussian blur. Expensive above ~20px |
| brightness(%) | 0 to 200%+ | 100% is unchanged, 0% is black |
| contrast(%) | 0 to 200%+ | 100% unchanged, 0% is flat grey |
| saturate(%) | 0 to 300%+ | 0% is grayscale, 100% unchanged |
| grayscale(%) | 0 to 100% | Removes color |
| sepia(%) | 0 to 100% | Warm brown tone |
| hue-rotate(deg) | 0 to 360° | Shifts every hue around the wheel |
| invert(%) | 0 to 100% | Inverts channels |
| opacity(%) | 0 to 100% | Cheaper to animate than the opacity property |
| drop-shadow() | x y blur color | Follows the actual shape, not the box |
Filters apply left to right and the order changes the result. grayscale(1) sepia(1) gives a sepia image; sepia(1) grayscale(1) gives a grey one. Duotone is grayscale(1) sepia(1) hue-rotate(Xdeg) saturate(3) — grey first, then tint.
drop-shadow versus box-shadow
box-shadow follows the element’s rectangular box, honoring border-radius and nothing else. filter: drop-shadow() follows the actual rendered shape — including transparency in a PNG, the outline of an SVG path, and anything clipped with clip-path.
Apply box-shadow to a transparent logo and you get a rectangle floating behind it. That is the giveaway of a shadow on the wrong property, and it is common enough to be worth checking for.
The trade is cost. drop-shadow is a filter operation evaluated per pixel of the shape, so it is meaningfully more expensive than box-shadow and worse to animate. Use box-shadow for cards and buttons; use drop-shadow only when the shape is not a box.
Performance, and when filters become a problem
A static filter is composited on the GPU and costs almost nothing. Two things make it expensive.
Animating the filter value. Changing a blur radius forces the effect to be re-evaluated every frame, which drops frames on mid-range hardware at any meaningful size. Animate opacity or transform on a pre-filtered layer instead.
backdrop-filter over a large or scrolling area. It re-samples whatever is behind it, so a full-viewport frosted header over a scrolling page is one of the most reliable ways to make a site feel sluggish on a laptop. Keep the blurred region small, and prefer a solid semi-opaque background where the effect is decorative.
Also worth knowing: a filter creates a containing block for fixed-position descendants and a new stacking context. A position: fixed child of a filtered element will position itself against that element rather than the viewport, which is a genuinely confusing bug to track down.
Frequently asked questions
How do I make frosted glass?
A semi-transparent background plus backdrop-filter: blur(16px) saturate(1.6), and a hairline border. The saturation boost stops it reading grey; the border gives it an edge.
Why is my backdrop-filter doing nothing?
Almost always an opaque background on the same element — there is nothing showing through to blur. Use rgba with alpha well below 1.
Does the order of filters matter?
Yes. They apply left to right. grayscale(1) sepia(1) and sepia(1) grayscale(1) produce completely different results.
Are filters bad for performance?
Static ones are cheap. Animating a blur radius, or a backdrop-filter across a large scrolling area, is expensive. Animate opacity or transform instead.
Is backdrop-filter supported everywhere?
Yes in all current browsers. Older Safari needs the -webkit- prefix, which the generated CSS includes.
Why did my fixed-position element move?
A filter creates a containing block for fixed descendants. The child now positions against the filtered element instead of the viewport — move it outside, or use a different approach.
Do filters modify the image file?
No. They are display-time effects. The underlying file is untouched, which also means the full-size image is still downloaded.