Frosted
Glass
/ iOS
Translucent panels that blur the vivid gradient behind them - creating depth, hierarchy, and the impression of floating surfaces. Pioneered by iOS 7 in 2013, now native to every Apple platform and ubiquitous in modern UI design.
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.3);
border-radius: 16px;
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(0,122,255,.4);
border-radius: 16px;
White always
65% opacity white
// Buttons
// Glass Inputs
// Toggles & Progress
Glass Animals
Frosted music widget with translucent card body blurring the gradient behind it.
18° San Francisco
Partly cloudy with a chance of beautiful glassmorphism effects in the afternoon.
$2,481.00
Glass card surfaces make financial data feel premium without heavy visual weight.
Dashboard
No Background = No Glass
backdrop-filter only works when there is something vivid behind the element to blur. A glass panel on a plain white background is invisible. The gradient is not decoration - it is the required substrate for the entire technique.
18% White, blur(20px), saturate(180%)
These three values are the canonical glass formula. Increasing opacity beyond 25% makes the glass opaque. Decreasing blur below 12px loses the frosted effect. Saturate adds vibrancy to the blurred content visible through the panel.
The 30% White Border is Non-Negotiable
Without the 1px rgba(255,255,255,.3) border, the glass panel loses its edge definition and merges into the background. This is the single border that separates glass from transparency.
Maximum Three Layers Deep
Glass panels can sit inside other glass panels - but beyond three layers the blur compounds and becomes visually muddy. Use glass-light for the outer frame, glass-dark for inner panels, and solid colours for the deepest elements.