ananthujp

Posted on Aug 23

Build a Mac-Style "Liquid Glass" UI in Minutes (with a Dock, Navbar & More)

#css #tutorial #uidesign #webdev

Hey DEV community! I'm not a regular here, but I've been tinkering with web design tools and wanted to share something fun I built. If you're into CSS effects, UI/UX tweaks, or just want to add that sleek Apple-inspired "glassmorphism" to your projects without sweating the details, this might be for you.

TL;DR: I created a simple web generator that lets you design liquid glass elements and export clean HTML/CSS. We'll walk through building a macOS-style Dock, a frosted navbar, a Spotlight-like search bar, and a toast notification. Try it out: liquid-glass-pi.vercel.app. Copy-paste the code snippets below, tweak as needed, and drop them into your site.

Why "Liquid Glass" Feels So Premium

Apple's glassmorphism is all about that subtle blur, refraction, and vibrancy—making backgrounds feel dynamic without overwhelming the content. It's a balance of blur, brightness, saturation, and distortion.

My tool simplifies this with sliders for visual tweaking, then spits out HTML/CSS using SVG filters. It's designer-friendly: live previews, customizable sizes, and you can slot in any HTML (icons, text, buttons, etc.) inside the glass.

What We'll Build

A macOS-style Dock with interactive icons
A sticky, translucent Navbar
A command palette-style Search Bar (like Spotlight)
A Toast Notification

I'll include presets for the sliders and HTML snippets to paste into the tool's "Content Inside" section.

(Pro tip: In the tool, you'll see panels for customizing the glass, adding content, and generating code.)

🔧 Use Case #1: macOS-Style Dock

Step 1: Set the Sliders

Height: 7
Width: 45
Border Radius: 100
Post-Blur: 0
Brightness: 11
Saturation: 10
Distortion: 9

Step 2: Paste this into "Content Inside"

<div style="display: flex; justify-content: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 15px; padding: 10px 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
  <a href="#" style="margin: 0 10px; text-decoration: none;">
    <img src="https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/7a0f19f5a5ed1063a64b7203956b49b8_low_res_Netflix.png" style="width: 64px; height: 64px; border-radius: 15px; transition: transform 0.3s ease; object-fit: cover;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  </a>
  <a href="#" style="margin: 0 10px; text-decoration: none;">
    <img src="https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/0d8939784e7192d5540548669cbffabf_low_res_Final_Cut.png" style="width: 64px; height: 64px; border-radius: 15px; transition: transform 0.3s ease; object-fit: cover;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  </a>
  <a href="#" style="margin: 0 10px; text-decoration: none;">
    <img src="https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/880bf964f1352d71af45f1893717e030_low_res_Visual_Studio_Code.png" style="width: 64px; height: 64px; border-radius: 15px; transition: transform 0.3s ease; object-fit: cover;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  </a>
  <a href="#" style="margin: 0 10px; text-decoration: none;">
    <img src="https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/ca28fe5e283953b52d252dcac3502bcc_low_res_Blender_-_Liquid_Glass__Light_.png" style="width: 64px; height: 64px; border-radius: 15px; transition: transform 0.3s ease; object-fit: cover;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  </a>
  <a href="#" style="margin: 0 10px; text-decoration: none;">
    <img src="https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/436e0ee2e94c0917600139505aa36e7d_low_res_ChatGPT__Apple_Intelligence_.png" style="width: 64px; height: 64px; border-radius: 15px; transition: transform 0.3s ease; object-fit: cover;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  </a>
</div>

Step 3: Generate and Copy the HTML/CSS

Paste it into your project's <body> or a component. Add a filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)) for extra depth.

🧭 Use Case #2: Frosted Navbar (Sticky & Translucent)

Preset Sliders: Height 9 · Width 95 · Radius 24 · Post-Blur 0 · Brightness 12 · Saturation 12 · Distortion 3

Content to Paste:

<nav style="display:flex;align-items:center;justify-content:space-between;width:900px;padding:10px 18px;backdrop-filter:blur(8px);">
  <div style="display:flex;gap:10px;align-items:center;">
    <img src="/logo.svg" alt="Logo" style="width:28px;height:28px;border-radius:8px;"/>
    <strong>LiquidGlass</strong>
  </div>
  <ul style="display:flex;gap:18px;list-style:none;margin:0;padding:0;">
    <li><a href="#features">Features</a></li>
    <li><a href="#examples">Examples</a></li>
    <li><a href="#docs">Docs</a></li>
  </ul>
  <div style="display:flex;gap:10px;">
    <input placeholder="Search" style="padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);outline:none;"/>
    <a href="#" style="padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);text-decoration:none;">Sign in</a>
  </div>
</nav>

Style it with position: sticky; top: 0; in your CSS.

🔎 Use Case #3: Spotlight-Style Search/Command Palette

Preset: Height 7 · Width 60 · Radius 20 · Post-Blur 0 · Brightness 13 · Saturation 10 · Distortion 2

Content:

<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;">
  <span style="opacity:.75">⌘K</span>
  <input placeholder="Search or type a command…" autofocus style="flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);outline:none;"/>
</div>

Add JS to toggle on Cmd + K.

🔔 Use Case #4: Toast Notification

Preset: Height 6 · Width 30 · Radius 18 · Post-Blur 0 · Brightness 12 · Saturation 9 · Distortion 2
Content:

<div style="display:flex;align-items:center;gap:12px;padding:10px 14px;">
  <img src="/check.svg" alt="Success" style="width:18px;height:18px;"/>
  <div>
    <strong>Saved!</strong>
    <div style="font-size:12px;opacity:.8;">Your settings were updated.</div>
  </div>
  <button style="margin-left:auto;border:none;border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.2);cursor:pointer;">Undo</button>
</div>

Position: position: fixed; right: 16px; bottom: 16px; z-index: 50;.

Implementation Tips

Tech Stack: Pure HTML/CSS with SVG filters—no JS required. Works in modern browsers.
Frameworks: Drop the exported code into React, Vue, Svelte, or plain HTML.
Performance: Stick to moderate values (brightness/saturation 8-14, distortion 1-4) for smooth rendering.
Accessibility: Check contrast, add alt tags, and use text-shadow if needed. Respect prefers-reduced-motion.
Behind the Scenes: SVG filter chain (blur > color adjust > displacement map) applied as a background.

Quick Presets to Try

Hero Pill: Height 9 · Width 70 · Radius 100 · Brightness 14 · Saturation 12 · Distortion 5
Card: Height 35 · Width 45 · Radius 28 · Brightness 11 · Saturation 9 · Distortion 2

FAQ

Mobile-Friendly? Yes—high radius, low distortion.
Gradients/Images Inside? Sure, it's just HTML.
Conflicts with Tailwind/Bootstrap? No, it's self-contained.

Head over to liquid-glass-pi.vercel.app, play around, and build something awesome. If you create a cool dashboard or widget, share a screenshot in the comments—I'd love to see it!

What UI elements would you "glassify" next? Let me know below. 🚀

Top comments (8)

Ryan • Aug 23

very useful article!! thank you very much

ananthujp • Aug 23

Thanks for the kind words!

devuser123 • Aug 23

Love the presets, especially the toast notification one. One suggestion: maybe add a toggle for adding borders or shadows directly in the generator? Would save an extra CSS step.

ananthujp • Aug 23

Great idea on the borders/shadows—I'll note that for a future update. For now, you can add them post-export like border: 1px solid rgba(255,255,255,0.1); or use the pro tip I mentioned with drop-shadow.