- Document Number
007
- Subject of Record
- LIQUID GLASS ON THE WEB
- Prepared By
- TULIO CUNHA
- Date Filed
- SEP 15, 2025
- Classification
- INTERNAL TECHNICAL MEMORANDUM
Liquid glass on the web
SUBJECT BRIEF
Recreating Apple-like materials using CSS blur, transparency, and hairline borders.

Opening
Apple's materials create separation and depth using translucency and blur. On the web, you can simulate this with a semi-opaque surface, backdrop-filter: blur(), and a crisp hairline border.
.card {
background: color-mix(in oklch, var(--surface) 70%, transparent);
border: 1px solid var(--hairline);
backdrop-filter: blur(18px);
}Keep elevation subtle, emphasize content, and ensure contrast is sufficient in both light and dark modes.
END OF MEMORANDUM