0design / Library
macOS2021UI Style

Glassmorphism

Through the looking glass.

A hierarchy defined by translucency. Background blurs (backdrop-filter) allow content to float over layered backgrounds, mimicking frosted glass.

Interactive Playground

Live components rendered with Glassmorphism tokens.

Live Preview

Authentication

Secure your account with our new multi-factor authentication system.

Badges & Tags

NewFeaturedBetaPro

Type Scale

Display XL
H1 / 800 / 100%
Heading L
H2 / 600 / 80%

Typography

Primary / Headings

Aa

Secondary / Body

Aa

“The typography in Glassmorphism relies on geometric clarity.”

Use high contrast for headings. Maintain strict hierarchy and translate the font stack into design tokens so brands can extend the style without guesswork.

Color System

Background
Surface
Accent
Text

Usage Guidelines

When to Use Glassmorphism

Glassmorphism excels when you need a hierarchy defined by translucency. background blurs (backdrop-filter) allow content to float over layered backgrounds, mimicking frosted glass.. This style works best when you want to through the looking glass..

Best Practices

  • •Maintain consistent spacing using the gap-8 grid system.
  • •Use font-sans font-light tracking-wide for headings and font-sans text-white/80 for body text.
  • •Apply rounded-2xl for rounded corners and shadow-2xl shadow-black/50 for depth.

Style Playbook

Glassmorphism layers translucent panes over saturated gradients, mimicking frosted glass. It thrives on motion blur and depth.

History

  • •Popularized by macOS Big Sur and Fluent Design.
  • •Adopted in crypto dashboards and music products for futuristic ambiance.

Layout Principles

  • •Stack panes with varying blur radii to indicate depth.
  • •Use parallax or scroll-linked motion to reinforce glass layers.

Color Guidelines

Backdrop gradients

Dark-to-deep gradients increase depth behind frosted panes.

Accent glows

Neon glows around CTAs add energy without clutter.

Typography

Display type

Light weights with extra tracking feel airy atop glass.

Body copy

Keep weights at 500+ to avoid washout against luminous backgrounds.

Best For

  • Music/entertainment apps
  • Fintech premium tiers
  • Immersive dashboards

Watch Outs

  • ⚠️Too many translucent layers kill performance on mobile.
  • ⚠️Poor contrast if blur strength is inconsistent.

Notable Brands

Apple MusicMicrosoft FluentLinear Explorer concepts

Execution Tips

  • →Reserve heavy blur for hero sections; lighten it for content-dense areas.
  • →Ensure text has a solid backdrop (e.g., subtle gradient) to maintain readability.

AI Palette Generator

Describe a mood, scene, or style (e.g., "Cyberpunk Tokyo Rain" or "Scandinavian Morning"), and let our AI craft the perfect color system.