Create beautiful frosted glass UI effects with adjustable blur, transparency, and borders. Preview on different backgrounds and copy the CSS in one click.
This is a glassmorphism card with frosted glass effect. Adjust the controls below to customize the look.
Adjust the blur slider to control how frosted the glass appears. The transparency slider sets how see-through the card is — lower values make the glass more transparent. Use the tint colour to add a colour wash to the glass. Tweak border opacity and width for the characteristic glass edge highlight. Switch between backgrounds to see how your glass effect looks in different contexts.
Glassmorphism relies on four key CSS properties working together: backdrop-filter: blur() for the frosted effect, a semi-transparent background using rgba, a subtle border with low opacity white for the glass edge, and optionally box-shadow for depth. The element must sit over a colourful or image background — the effect is invisible over plain white or black.
The backdrop-filter property applies graphical effects to the area behind an element. Unlike filter which affects the element itself, backdrop-filter affects what shows through the element. You can combine multiple functions: backdrop-filter: blur(12px) saturate(180%) adds both blur and colour saturation boost for a richer glass effect.
As of 2026, backdrop-filter is supported in all major browsers including Chrome, Edge, Safari, and Firefox. Global support is above 95%. For the small percentage of users on older browsers, always provide a fallback semi-transparent background that still looks acceptable without the blur effect.
Glassmorphism can create contrast issues since the background bleeds through the element. Always test text readability against different backgrounds. Increase background opacity or add text shadows if contrast is insufficient. Aim for WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text).
backdrop-filter: blur() with a semi-transparent background-color using rgba, a subtle white border, and optionally a box-shadow. Place the element over a colourful background for the effect to be visible.backdrop-filter applies visual effects to the area behind an element. Unlike filter which affects the element, backdrop-filter affects what's visible through it — perfect for frosted glass, blur overlays, and similar effects.backdrop-filter is supported in Chrome, Edge, Safari, and Firefox. Global support exceeds 95%. Always provide a fallback semi-transparent background for older browsers.