G · 7 / 26

G — Glassmorphism

Frosted layers over moving light.

The style

A sheet of light with an edge.

Glass is older than its name. Windows Vista arrived in 2007 with Aero Glass: window frames you could see the desktop through, softened by blur. In 2013 iOS 7 swapped Apple’s leather and linen for translucent layers, and Control Center frosted whatever sat beneath it. The macOS Big Sur redesign of 2020 leaned on the same frosted panels, and late that year the designer Michał Malewicz gave the look the name that stuck: glassmorphism.

The recipe is short. Saturated colour goes at the back. Over it go panes that blur and brighten what they cover, each with a thin light edge and a highlight along its top, so it reads as a sheet with thickness. Depth comes from stacking panes at different distances.

Its weakness is what passes underneath. Text has to hold its contrast against the darkest colour that can drift behind it. Windows 11 still ships the look as two materials, Acrylic and Mica, and both Windows and Apple let people turn transparency off. Keep glass for chrome — bars, cards, players — and the long reading on something steady.

In use

A home, behind glass.

A control centre on a tablet: scenes, climate, lights, music and the front door, frosted over the wallpaper. Swap the wallpaper to test the glass on four backgrounds.

  1. Change the wallpaperFour backgrounds, two light and two dark. The panes switch from white glass to smoke when the colour behind them darkens.
  2. Keep the light paneForce white glass onto Dusk or Night and watch the readout: the labels fall to about 2.5:1.
  3. Run the housePick a scene, set the heating, dim a light, play a record, lock the door. Every control works.
Good eveningSaturday, 10 October · 2 lights on14° clear

Scenes

Climate · Living room

21.5°Now 20.4° · 46% humidity

Lights2 of 5 on

  • Living room
    Ceiling
  • Living room
    Floor lamp
  • Kitchen
    Pendant
  • Bedroom
    Bedside
  • Study
    Desk
Nine PanesFrosted Hours · Living room
1:04-2:38

Front door

Wallpaper
Keep the light pane on every wallpaper
Pane
White, 45%
Worst point
#8b5cf6
Labels there
4.9:1, passes
The kit

Every part, every state.

The parts that screen is built from, in every state. Panes frost the page; the controls on them are chips that never blur again. The rows of states hold still for comparison; everything else works.

Button

The one solid button is the one to press

Hover brightens the glass to 70% white, pressing dims it to 30%; disabled drops the edge and half the ink.

Text field

Fields fill to 80% white, so typing sits on calm ground

Select

The open list is 85% white: menus cover text

Switch, checkbox, radio

Eco
Night mode
Fan
On is solid ink, never just a brighter pane

Slider

Track 8px, thumb 22px; the fill is solid ink

Progress

Firmware update64%
68%ChargedProgress is ink on a chip; colour stays behind

Connecting to the hub…

Segments and tabs

3 rooms, 5 lights, 21.5° average.

A white thumb slides under the chosen segment

List rows

Hub network
Rows are chips: no blur stacked on blur

Card and loading

Living roomUpdated just now
Temp
21.5°
Humidity
46%
Lights
2 on
Loading the Bedroom card
Loading: a sheen sweeps across, like light on glass

Toast

Scene saved
Stays until dismissed; read out politely

Modal

The scrim dims what is behind; the dialog is near-solid, 85% white

Steps

  1. Done: Room
  2. 2Device
  3. 3Schedule
  4. 4Done
Done is solid, current is ringed, ahead is glass

Badges and avatars

  • Alerts on
  • 3 on
  • Home
  • Offline
33 alerts
  • Mina K., home
  • Joon S., home
  • Ara L., out
Colour is allowed on small solid things
Signature

Frost, measured.

A pane is four numbers: blur, saturation, tint and edge. Set them over any wallpaper and the readout checks the labels against the darkest colour behind the pane. It starts failing; make it pass, then copy the CSS.

Behind the pane
Labels at the worst point, over #1b10352.6:1Fails 4.5:1Body text there: 4.4:1. Blur only softens the worst point, so the number leaves it out.
.glass {
  background: rgb(255 255 255 / 0.45);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.70);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.90),
    0 30px 60px -30px rgb(40 26 110 / 0.35);
  color: #15161f;
}

/* Text at the worst point behind it: 4.4:1; labels (#3a3d52): 2.6:1. */

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: #f9fafc;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Tokens

The system, in numbers.

Eight colours with their contrast at the worst point, four materials, four blurs, five radii and a spacing scale. Copy them as custom properties.

Palette
  • --mist #eceff6The ground under the colour
  • --lime #c4f04dColour behind the glass
  • --violet #8b5cf6Colour behind the glass
  • --cyan #3ad6f0Colour behind the glass
  • --ink #15161fText, 8.4:1 at the worst point
  • --ink-2 #3a3d52Labels and notes, 4.9:1
  • --accent #4c1d95Chosen and current, 5.1:1
  • --danger #7a1610Errors, 5.0:1
Typeface · Plus Jakarta Sans
  • Seen through, not on.Extrabold 800
  • Seen through, not on.Medium 500
  • Seen through, not on.Light 300
Materials
  • Clearblur 12 · white 25%Bars over photos
  • Paneblur 24 · white 45%Cards and panels
  • Chipno blur · white 50%Controls on a pane
  • Solidno blur · #f9fafcReduced transparency
Blur
  • 8px
  • 12px
  • 24px
  • 40px
Radius
  • 12
  • 16
  • 20
  • 28
  • Full
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
:root {
  --mist: #eceff6;
  --lime: #c4f04d;
  --violet: #8b5cf6;
  --cyan: #3ad6f0;
  --ink: #15161f;
  --ink-2: #3a3d52;
  --accent: #4c1d95;
  --danger: #7a1610;

  /* Glass: colour goes behind, the pane stays pale. */
  --pane: rgb(255 255 255 / 0.45);
  --pane-clear: rgb(255 255 255 / 0.25);
  --chip: rgb(255 255 255 / 0.5);
  --edge: rgb(255 255 255 / 0.7);
  --frost: blur(24px) saturate(160%);
  --frost-clear: blur(12px) saturate(140%);
  --sheen: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --fall: 0 30px 60px -30px rgb(40 26 110 / 0.35);

  --radius-chip: 12px;
  --radius-control: 16px;
  --radius-card: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --pane: #f9fafc;
    --frost: none;
  }
}

Do

  • Put the colour behind the glass, not on it. The panes stay pale; the light underneath does the work.
  • Give every pane an edge: a one-pixel light border and a highlight along the top.
  • Check text against the darkest colour that can pass beneath it, and set the pane’s opacity from that.
  • Keep the blurred layers few, and give solid panes to anyone who turns transparency off.

Don’t

  • White glass on a dark wallpaper

    Over Night, the labels on a 45% white pane fall to 2.5:1. Darken the pane and the text with it.

  • Glass on glass

    Each pane blurs the one beneath. Three deep, the edges are gone and the browser blurs three times.

  • Colour on the pane

    Tinted violet, the pane hides the colour it was meant to show, and its labels drop to 2.5:1.

In the wild

Where the style shows up outside this page.

  1. 2007

    Windows Vista, Aero Glass

    MicrosoftBlurred, tinted window frames over the desktop behind them.
  2. 2013

    iOS 7 Control Centre

    AppleA sheet of frosted glass pulled up over whatever was on screen.
  3. 2020

    macOS Big Sur

    AppleTranslucent sidebars and menus, with the colour of the wallpaper coming through.
  4. 2025

    Liquid Glass

    AppleGlass that bends the light at its edges and moves as you do.