Liquid Glass CSS Generator

Liquid glass (also called glassmorphism) is a UI style that uses CSS backdrop-filter, translucent backgrounds, layered highlights and a soft drop shadow to make elements look like real frosted or polished glass floating above the page. It is the dominant translucent-UI language of 2025–26 desktop and mobile operating systems, music players, smart-home controls, and modern web dashboards.

Combine three layers: a translucent background like rgba(255,255,255,0.12), backdrop-filter: blur(20px) saturate(180%) (with -webkit-backdrop-filter for Safari), and a multi-layer box-shadow that adds an inset white top highlight, a hairline rim and a soft outer drop shadow. Place the element over a colorful background so the blur has something to refract.

Glass needs three things to read: a vivid background behind it (gradients or photos work, solid colors don't), a high-enough backdrop-filter blur (12–30px), and a clear edge — usually a hairline 1px inset highlight plus an outer drop shadow. If any of those are missing, the surface looks like a tinted overlay instead of glass.

backdrop-filter is supported in Chrome 76+, Edge 79+, Firefox 103+, and Safari 9+ with the -webkit- prefix. Always include both the prefixed and unprefixed declarations. For unsupported browsers, fall back to a higher-opacity background color via @supports not (backdrop-filter: blur(1px)).

It can be, but only with care. Translucent surfaces drop text-on-background contrast unpredictably because the underlying scene changes per page. Always test contrast against the busiest area of the background, bump tint opacity until WCAG 2.2 AA contrast (4.5:1 for body text) is met, and add a visible :focus-visible outline. Avoid glass for primary CTAs or any element where the user cannot see the content behind it.