Glassmorphism

Modern style with semi-transparent elements, background blur, soft shadows and frosted glass effect.

Archetypes

3

Colors

4

Style Characteristics

• Semi-transparency

• Background blur

• Soft shadows

• Light borders

• Multi-layering

• Airiness

✓ When to Use

• For modern digital products, premium tech brands. Creates sense of lightness and technology.

✗ Avoid If

• Simplicity or fast loading are needed. May be complex to implement and perceive on weak devices.

Usage Examples

Premium app

website

Tech startup

website

Music player

website

Brand Examples

Apple

Tech

Uses in macOS Big Sur and iOS

Windows 11

Tech

Acrylic material in interface

Stripe

Tech

Glassmorphic elements on website