Snippets
Browse all 11 CSS snippets. Each one is standalone, under 50 lines, and Tailwind v4 compatible.
glass
Bold Glass
High-impact glassmorphism with strong blur, saturated backdrop, and inset highlight. Hero cards, modals, and featured content that demands attention.
Colored Glass
Tinted glassmorphism with configurable hue via OKLCH. Change the color by adjusting a single custom property. Great for brand-themed glass effects.
Dark Glass
Smoky dark glass with reduced brightness backdrop. Ideal for overlays, dark-themed modals, and cinematic UI elements over light backgrounds.
Frosted Glass
Classic frosted glass effect with backdrop-filter blur. Configurable blur strength, opacity, and border. Includes dark mode and fallback.
Subtle Glass
A barely-there glass effect for understated UI surfaces. Light blur with minimal opacity — perfect for nav bars, toolbars, and overlays that shouldn't compete with content.
animations
Blur In
Elements materialize from a blurred state into sharp focus. A cinematic reveal effect with optional upward motion.
Fade In
Smooth fade-in animations with optional direction (up, down). Uses professional spring-like easing. Respects prefers-reduced-motion.
Scale In
Scale-based entrance animations — subtle grow, grow-up, and pop-from-center variants. Professional easing with reduced-motion support.
Slide In
Directional slide-in animations from left, right, or bottom. Smooth deceleration curve with reduced-motion support.
Stagger
Automatically stagger child element animations with configurable delay. Add the class to a parent and children animate in sequence — pure CSS, no JS.