Glassmorphism

Use translucent surfaces and background blur to suggest frosted glass.

Live preview Try the effect

DESIGN SYSTEM

Good design
makes content clearer.

Focus on content, hierarchy and thoughtful details.

Explore design

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Use translucent surfaces and background blur to suggest frosted glass. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Floating panels over visually varied backgrounds.

Related concepts

Transparency alone does not create a glass effect; readability requires sufficient contrast and a fallback surface.

Describe this effect

Output language

Use a translucent panel with subtle background blur, a visible border and an opaque fallback for readability.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.