Materials & Vibrancy

Material

A translucent, blurred layer that lets the content behind it show through, used for functional chrome (bars, sheets) so the interface feels layered rather than opaque.

backdrop-filter: blur() over a semi-transparent background — a toolbar the content scrolls beneath.

Toolbar
Translucent chrome over scrolling content

Tap the example to replay it · press and hold to slow it down

One of 220 cards in apple hig flashcards. Browse every card.