Flat Design vs Glassmorphism

Glassmorphism evolved from Flat Design.

Original specimen in the flat-design UI style

Flat Design

The deliberately two-dimensional interface style that stripped away skeuomorphic shadows, gradients, and textures in favor of solid color, crisp icons, and clean typography.

  • Solid, unshaded blocks of color with no gradients
  • Removal of drop shadows, bevels, and skeuomorphic texture
  • Simple geometric icons reduced to essential forms
  • Clean sans-serif typography and generous whitespace
  • Bright, often pastel or saturated flat color palettes
Full Flat Design guide →
Original specimen in the Glassmorphism style

Glassmorphism

Frosted, translucent panels that blur whatever sits behind them, floating over vivid backdrops with thin light borders to suggest layered sheets of glass.

  • Semi-transparent frosted panels
  • Background blur of underlying content
  • Thin, light, often gradient borders
  • Vivid colorful backdrops behind glass
  • Soft shadows implying floating layers
Full Glassmorphism guide →

At a glance

Flat DesignGlassmorphism
Erac. 2010–20172020s
DisciplineGraphic DesignGraphic Design
RegionGlobalGlobal
FamilyDigital, Corporate ModernUI/Interface, Digital
Formal traitsflat-color, minimal, sans-serif, iconographictranslucent, frosted-blur, thin-border, layered

More comparisons

Advertisement