Glassmorphism Generator
Create beautiful glassmorphism effects with backdrop-filter and live preview.
Preview
Glassmorphism card
Tune the controls to generate a polished frosted-glass effect.
Generated CSS
Frequently Asked Questions
Why is the blur effect hard to notice on a plain background?
Because `backdrop-filter` blurs whatever is behind the element, not the element itself. The demo uses a busy gradient scene so the frosted effect is actually visible.
Why does the copied CSS include both `backdrop-filter` and `-webkit-backdrop-filter`?
The generator outputs both declarations on purpose. That mirrors how people usually ship this effect for broader browser compatibility.
What does the Transparency slider really change?
Internally it inverts that value into the background alpha, so higher transparency means a lower alpha in the generated `rgba(...)` background color.
Can I tune the shadow color too?
Not with the current controls. Blur, background, border opacity, and radius are adjustable, but the drop shadow is a fixed dark shadow in the generated CSS.
Why is the border always white-ish?
The border color is hardcoded to white with adjustable opacity. Only its alpha changes; the border hue itself does not.