When navigation disappears, content breathes. A translucent frosted-glass bar with backdrop saturation and blur, hovering above the page like a whisper. Ultra-small typography, generous letter-spacing, and a single-pixel divider — nothing competes for attention.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build an Apple-style frosted glass navigation bar.
Key design decisions:
1. Background: #F8FAFCB8 with backdrop-filter: saturate(180%) blur(20px). The saturation boost prevents the blur from washing out colors beneath.
2. Typography: 12px, -0.01em letter-spacing, 500 weight. Apple uses surprisingly small nav text — it stays out of the way.
3. Border: A single pixel (#0000001A) at the bottom. No shadows. The blur provides all the depth.
4. Links: #64748B default, #0F172A on hover (150ms). The color shift is subtle — users feel it more than see it.
5. Structure: Fixed position, full-width, z-50. Logo left, links center, CTA right.
6. CTA: Small rounded-full button in #4F46E5 (Apple Blue), white text. No shadow, no border.
The navigation should feel like it's not there until you need it.When navigation disappears, content breathes. A translucent frosted-glass bar with backdrop saturation and blur, hovering above the page like a whisper. Ultra-small typography, generous letter-spacing, and a single-pixel divider — nothing competes for attention.