← Back to Styles
2020-present

Glassmorphism

A translucent design style using frosted glass effects, background blur, and layered transparency to create depth and hierarchy.

Live Demo

🔮

Interactive Glassmorphism Demo

Open Full Demo ↗

Origins & History

Glassmorphism gained popularity in 2020, building on the 'Acrylic' effect introduced in Microsoft's Fluent Design System and Apple's translucent UI elements in macOS Big Sur. The term was coined by the design community to describe this aesthetic.

The style relies on CSS backdrop-filter for blur effects, semi-transparent backgrounds, and subtle borders. It creates a sense of depth and hierarchy while allowing background content to influence the foreground appearance.

Glassmorphism is used in modern dashboard designs, card-based layouts, and overlay interfaces. While visually appealing, it requires careful contrast management for accessibility and consideration of performance on lower-end devices.

Key Characteristics

  • Frosted glass transparency effect
  • Background blur (backdrop-filter)
  • Multi-layered surfaces
  • Subtle borders and highlights
  • Vibrant, colorful backgrounds
  • Floating card elements

Why This Demo Is Authentic

This implementation faithfully recreates the Glassmorphism through careful attention to typography, grid systems, color usage, and compositional principles documented in the original movement. Every design decision is grounded in historical research.

Style Guide

Color Palette
Typography

Inter

Secondary: DM Sans

Glassmorphism pairs well with clean, geometric sans-serifs. White or light-colored text on...

Grid

Layered card system with transparency

Student Work

Community Submissions

1 submission for this style