Experience the complete Vitra CSS framework with live theme switching, configurable particles, glassmorphism effects, and interactive components.
Vitra CSS uses CSS custom properties (variables) with the --vitra- prefix for all design tokens.
Colors update instantly when switching themes
Beautiful frosted glass effects with automatic fallbacks for browsers without backdrop-filter support.
Default glass effect with backdrop blur.
Enhanced blur for more prominence.
Light glass effect for gentle overlays.
Glass with accent-colored border.
Add beautiful floating particles with glow effects. Configurable via JavaScript API or data attributes.
Particles will appear here when spawned
Particles can also be configured via HTML data attributes:
<div data-vitra-particles="5" data-vitra-particle-color="#ff6b6b">
<!-- 5 red particles appear here -->
</div>Smooth reveal animations, hover interactions, and full prefers-reduced-motion support.
This section uses the vitra-reveal class and appears with animation when scrolled into view.
Multiple items can reveal with stagger delays for elegant cascading effects.
All animations respect user's motion preferences via prefers-reduced-motion.
Lifts on hover with shadow
Glows on hover
Scales up on hover
Vitra CSS automatically disables animations when users prefer reduced motion.
Test: Enable "Reduce motion" in your OS settings, then refresh the page. All animations should be disabled.
Fluid containers, responsive grids, flex utilities, and clamp()-based spacing.
Containers use clamp() for fluid responsive sizing.
This content is inside a vitra-container
All Vitra CSS components with token-only styling, glass variants, and accessibility built-in.
Basic card with surface background and border.
Card with glassmorphism effect.
Hover to see lift effect.
Use vitra-navbar-mobile for mobile drawer navigation
Modals support focus trapping, ESC close, and overlay click close
Content for the first tab.
Use vitra-navbar-mobile for mobile drawer navigation
Modals support focus trapping, ESC close, and overlay click close
Content for the first tab.
Avatars use initials with colored backgrounds