Building a Glassmorphism Sidebar using modern CSS backdrop filter property efficiently
Velvet Glass - Glassmorphism Sidebar
A premium glassmorphism sidebar built with pure CSS backdrop-filter, Tailwind CSS, and Remix Icons. Part of the DevIgnitor CSS Tricks series.
What is Velvet Glass?
Velvet Glass is a fully self-contained, production-quality sidebar UI component that demonstrates the power of CSS backdrop-filter in a real-world layout. The glass doesn't fake depth - it earns it. A living background of softly spawning and fading colored circles gives the frosted glass surface genuine visual work to do, so the blur effect reads as real material rather than a stylesheet trick.
The name came from the feel: not cold or clinical, but warm, soft, and tactile - like light filtered through frosted silk.
Built as part of the DevIgnitor CSS series - a growing library of interactive CSS demos for developers who learn by seeing.
Get it Here - github.com/Devignitor/Sidebars/tree/main/01.%20Velvet%20Glass%20-%20Glassmorphism%20Sidebar
Features
True neutral glass - sidebar uses zero color tint; it reads as pure frosted material in both themes
Floating bubble background - colorful circles spawn at random positions, fade in over ~0.6s, hold, then fade out; new ones appear every 500-600ms
Dark / Light theme toggle - full token swap via CSS custom properties; glass values, bubble opacity, dot grid, and base gradients all adapt
Collapse / expand sidebar - smooth cubic-bezier width transition from 256px - 64px; labels, badges, and section titles fade out; icon-only mode with hover tooltips
Edge toggle button - circular pill button sitting exactly on the right border of the sidebar (right: -14px), vertically centered; turns red on hover with glow
Active nav state - red left border strip, glow effect, accent-colored icon, subtle background highlight
CSS Tools accordion - expand/collapse sub-menu with smooth max-height transition and rotating chevron
Ripple effect - on every nav item click
Notification badge - with animated CSS-only ping ring
User card footer - avatar gradient, online status dot, three action buttons
Live CSS annotation - bottom-right chip shows the exact backdrop-filter values currently active, updates on theme switch
Red Hat Text font - 300-700 weight range across all UI; DM Mono for code labels, badges, and mono annotations