Free Component
Liquid Glass macOS Dock
A macOS-inspired floating frosted glass bottom dock with smooth icon magnification and active app indicators.
Colours in this gradient
#090d16#38bdf8#818cf8#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="dock-stage">
<div class="dock-panel" id="dockPanel">
<div class="dock-item" data-name="Finder">
<span class="dock-tooltip">Finder</span>
<div class="dock-icon ic-blue">📁</div>
<span class="dock-dot is-active"></span>
</div>
<div class="dock-item" data-name="Terminal">
<span class="dock-tooltip">Terminal</span>
<div class="dock-icon ic-dark">⌨️</div>
<span class="dock-dot is-active"></span>
</div>
<div class="dock-item" data-name="Code Editor">
<span class="dock-tooltip">VS Code</span>
<div class="dock-icon ic-cyan">💻</div>
<span class="dock-dot is-active"></span>
</div>
<div class="dock-divider"></div>
<div class="dock-item" data-name="Music">
<span class="dock-tooltip">Music</span>
<div class="dock-icon ic-pink">🎵</div>
<span class="dock-dot"></span>
</div>
<div class="dock-item" data-name="Notes">
<span class="dock-tooltip">Notes</span>
<div class="dock-icon ic-amber">📝</div>
<span class="dock-dot"></span>
</div>
<div class="dock-item" data-name="Settings">
<span class="dock-tooltip">Settings</span>
<div class="dock-icon ic-slate">⚙️</div>
<span class="dock-dot"></span>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a macOS-inspired frosted glass bottom dock in HTML and CSS. Requirements: - Bottom-aligned floating container with frosted glass (backdrop-filter: blur(20px)). - App icons that smoothly elevate with translateY(-12px) and scale(1.15) on hover. - Tooltip above each icon showing application title. - Small glowing active app indicator dot beneath running applications. - Thin vertical divider separating utility apps. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use backdrop-filter: blur() with semi-transparent white border and background for glassmorphism.
- 2
Apply cubic-bezier spring transition on dock items for authentic OS spring hover physics.
- 3
Add absolute tooltips that reveal on parent item hover.
Customisation tips
- Include -webkit-backdrop-filter for Safari compatibility.