What is Glassmorphism?

Glassmorphism makes a surface look like a pane of frosted glass laid over the page. Whatever sits behind the panel shows through, blurred and slightly brightened, while the panel's own content stays sharp. Apple's macOS and iOS materials made the look familiar, and on the web it is built with one CSS property, backdrop-filter, plus a semi-transparent background. It works well for overlays, navigation bars and floating panels that need to feel connected to the content underneath.

What makes it work

• Something colorful behind it. Blur has nothing to show over a flat gray page. Gradients, photos or brand shapes behind the pane are what read as glass.
• A translucent fill, typically white or black at 40 to 70 percent opacity.
• A backdrop filter: blur() frosts the background and saturate() above 1 restores the color that blurring washes out.
• An edge: a 1px light border and an inset top highlight, the way light catches the rim of real glass.

<div className="rounded-2xl border border-white/60 bg-white/55 p-6 shadow-lg backdrop-blur-xl backdrop-saturate-150 dark:border-white/10 dark:bg-black/40">
  <h2 className="font-medium">Frosted panel</h2>
</div>

Readability and accessibility

Because the background changes, text contrast is not a single number. Check it against the worst case: the lightest and the busiest thing that can scroll behind the panel. If text over glass cannot hold 4.5:1 for body copy under WCAG contrast rules, raise the fill opacity or the blur until it can. Keep glass for chrome and short labels, not long reading. Some platforms let users ask for less transparency; where the prefers-reduced-transparency media query is supported, switch to an opaque fill.

Performance and fallbacks

• backdrop-filter re-samples and blurs the area behind the element on every frame it changes. Large glass areas over scrolling content, or several stacked glass layers, can drop frames on low-end devices.
• Use @supports (backdrop-filter: blur(1px)) and give browsers without support a more opaque fill so text stays readable.
• Avoid animating the blur radius. Animate opacity or transform of the panel instead.

In MiniDev UI, glass is a material rather than a one-off class. Set data-material="glass" on html or any container and surfaces such as Dialog and Popover switch to translucent fills and 22px frost, lit by the LightProvider. The glassmorphism in Tailwind CSS guide covers the full CSS, contrast checks and fallbacks.