Principles
Frosted glass is chrome, not content. It belongs on the surfaces that float over your interface: navigation, overlays, pickers, toasts. Used there it reads as hierarchy and lets the work show through. Used as a reading surface it just makes text harder to read. This page is the whole system: the recipe, the anatomy, the real components, a builder, and the motion rules that keep it cheap to animate.
- Floating chrome that rides over scrolling content: the nav orb, a command bar.
- Transient overlays and sheets: dialogs, mobile menus, toasts.
- Pickers and menus that want to borrow the color beneath them.
- Any surface where seeing through to the content is the point.
- Long-form reading and documentation, where legibility beats depth.
- Dense data: tables, forms, dashboards that stay put all session.
- Anything on screen the whole time, where a live blur just burns frames.
- Low-end devices, where a full-page backdrop filter is the first thing to drop.
- The tint buys the contrast, not the blur. Body text on glass needs the darkened surface fill under it. Blur alone leaves text swimming.
- Hold a real contrast floor. If the background can go light, the tint has to go darker. Judge glass over the brightest thing it can sit on.
- The frosted layer never carries meaning. Glyphs, labels, and icons sit crisp on top of the glass, never blurred inside it. That is the icons lesson, learned the hard way here.
- Accent is a fill, not a text color. Text is white or muted white. The blue only shows up as the selected state.
- Two glass planes is the ceiling. A third reads as murk. The blurs compound and the whole stack turns to mud.
- Put a scrim under a bloom. Give the glass something calm and consistent to frost, not whatever noise happens to be behind it.
- Never stack glass straight on glass. Keep a solid or a scrim between two planes so each one has a clear job.
| INGREDIENT | VALUE | NOTE |
|---|---|---|
| Surface tint | rgba(18,18,18,.55) to rgba(20,20,20,.6) | the darkened fill that buys contrast |
| Backdrop filter | blur(12px to 14px) saturate(1.2) | always paired with the -webkit- prefix |
| Border | 1px solid rgba(255,255,255,.12 to .14) | catches the light along the edge |
| Top highlight | inset 0 1px 0 rgba(255,255,255,.10) | a 1px specular line inside the top edge |
| Depth shadow | 0 12px 32px rgba(0,0,0,.5) | lifts the plane off the content below |
| Radius | 13 to 16px cards and pills, 9999px orbs | pills and orbs read softer than sharp corners |
| Content | white or muted white, accent as selection | the mark sits on the glass, never in it |
Anatomy
Glass is six ingredients working together. Toggle each one off to see what it was doing. The card is judged over three backgrounds because glass that looks fine on one color can fall apart on another. Everything starts on.
Liquid Glass explained
Apple's Liquid Glass is not a heavier blur. It is an optical material that bends light at its edges, generates its own color from what sits behind it, and only ever lives on the floating control layer. These demos pull the ideas apart one at a time, from the refraction that gives it its name to the touch illumination that makes it feel alive. Values here are our own dark-theme mappings, not Apple quotes.
url() in backdrop-filter, so this is feature-detected and the everywhere-supported frosted fallback shows when it is missing.The material ladder
Apple ships one glass with many thicknesses, from ultraThin over media up to the opaque chrome that separates content from controls. These six swatches map that ladder onto our pure-black theme. Every value is a proposed dark-theme mapping, not an Apple quote. Switch the backdrop to judge each tier over color, and copy the exact rule block.
Vibrancy and text
Text on glass should not carry its own fixed color. Apple's materials use vibrancy tiers, semantic levels that pull from the content behind and stay legible as it shifts. The fix maps those tiers onto our tokens: primary is the foreground, secondary and tertiary step down through the muted greys. Toggle the card to hard-coded hex and watch it drown as the mesh drifts.
visionOS depth model
In visionOS almost everything is glass, and depth is spelled out through light. Controls attach to a window's edge and float partly outside it at a nearer depth. Darker material over lighter reads as recessed, lighter over darker signals something you can touch. Floating elements catch a specular highlight on their upper edge and cast a soft shadow below. This mock stitches those signatures together.
Now Playing
The window is lighter glass over a darker room. Its ornament rides above the top edge on its own nearer plane, with a stronger shadow selling the gap.
Web techniques catalog
Seven ways to build glass on the web, from the frosted base you should reach for first to the true refraction you should reserve for one hero. Each card is a live demo with effort, performance, and support read in the same chip language used across this page. Adopt the cheap, well-supported ones as the baseline and progressive-enhance the rest.
Specular and rim recipes
Three copyable treatments that give flat glass its edge. The traveling highlight is the signature accent, a slow sheen that reads as light moving across the surface. The inset top light is the 1px specular that catches the rim. The noise overlay breaks up banding so the frost looks like real ground glass. Lift any of them straight into your own stylesheet.
Recipes
The site's real glass surfaces, rebuilt here as static replicas so you can lift the exact rule block. Each Copy CSS button carries the same values these components ship with. No two of them are quite the same, which is the point: the recipe flexes by role.
Playground
Dial the recipe and read the CSS back. The preview updates live over the same three backgrounds from Anatomy, and the generated block is the exact rule you would paste. Start from the site's defaults, then break them on purpose to feel the edges.
Motion
Glass is expensive to repaint, so animate the cheap channels and leave the blur alone. Hover both chips below. One springs on transform and holds sixty frames. The other animates its blur radius and drags. Same chip, very different cost.
- Never animate the blur radius. Changing backdrop-filter forces a repaint storm. Animate transform and opacity only.
- Springs the site uses: 480 stiffness, 30 damping for the bloom; 500 stiffness, 30 damping for hover lifts.
- Enter and exit choreography: scale from .4 plus opacity, staggered 35 to 40ms between petals, so a set unfurls instead of appearing.
- Under a 3D-rotated parent, give the glass translateZ(0) and will-change so it owns its layer, and clip on the rotating parent so the frosted edge does not get cropped.
- Perspective lives on the parent only, never as perspective() inside a transform string, and never on a parent that also rotates a glass child.
- Reduced motion: springs collapse to instant states, the blur never animates, and the orb's idle specular stops.
Apple vs Google
Both platforms redesigned around depth in 2025, and they landed in opposite places. Apple made depth a physical material that bends and tints light. Google made depth a property of color, tonal elevation that mostly retired the shadow. One dazzles and gambles on legibility. The other stays calm and reliably accessible. Neither is wrong. They are different bets.
Apple, Liquid Glass
DEPTH AS OPTICAL MATERIAL
- Glass is a real material that generates its own color from the environment behind it.
- Refraction, specular highlights, and content-aware shadow sell physical realism.
- Built for a spatial runway that runs from the phone through to visionOS.
- The gamble: spectacle can undercut legibility, which is why the fallbacks matter.
Google, Material 3 Expressive
DEPTH AS TONAL ELEVATION
- Elevation is a surface color plus a tint overlay, which largely replaced the drop shadow.
- Blur is used only deliberately: Android 16 quick settings and the notification shade, extended in Android 17 betas and Wear OS 6.
- Paired with an explicit Reduce Blur Effects toggle, so accessibility is a first-class switch.
- The trade: restrained and less dazzling, but legible on a far wider range of hardware.
THE TRADE-OFF IN ONE LINE
Liquid Glass dazzles but risks legibility. M3 Expressive is restrained but reliably accessible. This page sides with legibility first: the headline recipe is the everywhere-supported frosted set with a scrim and a solid reduced-transparency fallback, and refraction is reserved for a single hero.
Accessibility and legibility
Glass is the one material that can quietly fail a reader. The blur that makes it beautiful is the same blur that can bury text or trigger sensory discomfort. These are the hard rules, plus live simulations of the two media queries that matter. The toggles here simulate the OS settings on this page so you can see the effect without changing your system.
- Hit WCAG against the worst case. 4.5:1 body and 3:1 large text, measured over the brightest backdrop the glass can ever sit on.
- Always ship a text scrim. A wash of rgba(0,0,0,.20) to .30 under text on the dark theme.
- Hold minimum opacity. Text-bearing glass over busy imagery needs about 55% effective surface opacity or more.
- Keep blur in the sweet spot. 8 to 20px for card-sized surfaces. Past that it reads as fog, not frost.
- Honor prefers-reduced-transparency. Drop to a solid --panel-2, not a lighter blur.
- Honor prefers-reduced-motion. Freeze traveling speculars and morphs to a static state.
- Flip text by luminance. Where feasible, switch text light or dark to match the backdrop under it.
- Take discomfort seriously. Blur causes sensory discomfort for some users, so the reduced path has to be genuinely solid.
- Never stack glass on glass. Two planes is the ceiling, and each needs something solid or a scrim between them.
- Legibility beats spectacle. Ship the opaque fallback first, then layer the glass on top of a design that already works without it.
SHIP THE OPAQUE FALLBACK FIRST
In iOS 26 beta 1, Control Center leaned so far into clear glass that the controls were widely criticized as unreadable over bright wallpapers. By beta 2 Apple had walked it back: more opaque surfaces and additional accessibility toggles. The lesson is the one this whole section is built on. Even the company that invented the material shipped it too transparent at first. Legibility beats spectacle, and the opaque path is the one to get right before anything else.
Do and don't
The whole system compressed into two columns. Everything on the left is a habit worth keeping. Everything on the right is a way glass goes wrong, usually because it wandered off the floating control layer or tried to carry a reading surface it had no business carrying.
- Keep it on the floating layer. Navigation, controls, overlays, toasts. The chrome that rides over content.
- Let the tint buy the contrast. The darkened fill holds the text. The blur is only the look.
- Ship the opaque fallback first. Solid --panel-2 for reduced transparency, then enhance up to glass.
- Animate the cheap channels. Transform and opacity. Materialize with stepped blur, never a continuous one.
- Reserve refraction for one hero. Progressive-enhance it, with a visible frosted fallback everywhere else.
- Don't glass a reading surface. Long-form and dense data want a solid panel, not a live blur.
- Don't stack glass on glass. A third plane turns the whole stack to murk. Two is the ceiling.
- Don't drop opacity for looks. Below about 55% over busy imagery the text starts to swim.
- Don't animate the blur radius. It repaints the element every frame. This is the most expensive thing you can do.
- Don't color the type. Text is white or muted white. The accent is a fill and a selected state, never a text color.
Process
The honest version of how the glass systems on this site came together, and where they still want to go. Two of them are worth walking through: the icon slabs and the navigation bloom.
Enclosed
The glyph wraps a region, so it rides fully inside the slab. A folder, a card, a message. The container holds it.
Peek-out
A single stroke or a pointer would get lost inside. So the tip breaks the slab edge and the silhouette survives. An arrow, a bolt.
Resources
Twenty sources behind this page, grouped roughly from Apple's own material through the web recipes and the accessibility critiques. Every link was verified live in July 2026. The Apple documentation is canonical, the LiquidGlassReference repo is the best behavioral reference, and the kube and LogRocket writeups carry the copy-ready refraction values.