Web development1 min readFree
Apple-style glass UI with one CSS line
Get Apple's frosted glass look with one line of CSS.
Arth WaghelaPublished 11 Dec 2026 · @grow_witharth
- Read time
- 1 min read
- Steps
- 4
- Cost
- Free
- Topic
- Web development
Apple-style glass UI with one CSS lineWeb developmentStep 1: Add the blur
Add this to your card: backdrop-filter: blur(16px); It blurs what is behind the card.
Step 2: Make it see-through
Give the card a white background at about 15% opacity.
Step 3: Add the edges
Add a thin light border and round corners.
Step 4: Add colour behind
Put a soft colourful gradient behind the card. Without colour, the glass looks grey.
Good to know
- This works in all new browsers. Very old browsers may not show the blur.
Official links
Want more free tool tips? Follow @grow_witharth on Instagram.