Vitra · CSS Framework · v1.11.0
Cinematic glassmorphism. Zero dependencies, pure CSS.
Glassmorphism, cinematic animations, and a full design system — all in a single lightweight CSS file. Drop two lines into any HTML page and start building.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.11.0/dist/vitra.min.css"><script src="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.11.0/dist/vitra.min.js"></script><div class="vitra-card vitra-glass">Hello, Vitra!</div><!DOCTYPE html>
<html data-theme="auto">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.11.0/dist/vitra.min.css">
</head>
<body>
<div class="vitra-card vitra-glass">Hello, Vitra!</div>
<script src="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.11.0/dist/vitra.min.js"></script>
</body>
</html>That's it — no build step, no configuration. GitHub →
Five premium visual effects added in v1.4.0 — inspired by Stripe, Linear, and Raycast aesthetics.
Radial mesh gradient with 3 blobs that shift position continuously via vitra-mesh-shift keyframes.
Large blur spheres (300–400px) with 80px blur that float in parallax via vitra-float keyframes.
Text with animated gradient via background-clip: text and vitra-text-shift keyframes.
Animated conic-gradient border via oversized ::before with spinning keyframe. Inner area masked via ::after.
A CSS-only ambient mountain landscape, now eight layers deep. SVG-silhouette ridgelines at three depths, drifting clouds, a dark-theme star field, a sun that catches the peaks, atmospheric haze, and differential-speed parallax — glass panels become windows onto a scene. Zero JS, zero images, colors derived from the active theme.
Eight fixed child layers; use .vitra-scenery for a full-page backdrop or .vitra-scenery-inline inside any position: relative; overflow: hidden container. .vitra-scenery-stars is safe to always include — it's opacity-gated to 0 on light-scheme themes. Tune with --vitra-scenery-speed, --vitra-scenery-hue, and per-layer blur/opacity tokens.
<div class="vitra-scenery" aria-hidden="true">
<div class="vitra-scenery-sky"></div>
<div class="vitra-scenery-clouds"></div>
<div class="vitra-scenery-stars"></div>
<div class="vitra-scenery-halo"></div>
<div class="vitra-scenery-ridge-far"></div>
<div class="vitra-scenery-ridge-mid"></div>
<div class="vitra-scenery-ridge-near"></div>
<div class="vitra-scenery-grain"></div>
</div>All 7 themes with tinted neutrals — every surface carries a trace of the accent hue.
This card uses --vitra-color-surface — notice the subtle tint.
backdrop-filter
Vitra leverages 2026 CSS APIs with progressive enhancement fallbacks.
Uses showPopover() when supported, falls back to class-based toggle.
Elements animate in from their initial state using @starting-style.
Perceptually uniform color interpolation via --vitra-color-accent-oklch.
Pure-CSS shader-like effects — no WebGL, no Three.js, no JS canvas. Progressive enhancement with modern CSS APIs.
Grain texture via SVG feTurbulence filter rendered as a data URI background. mix-blend-mode: overlay for cinematic film grain.
Circular progress indicator using conic-gradient with smooth animation via @property --vitra-progress-ring-value. Set CSS variable as percentage.
clip-path polygon morphing animation: diamond → square → triangle → hexagon → diamond. 12s ease-in-out loop.
Animated conic-gradient border using @property --vitra-border-glow-angle for smooth angle interpolation. Use .vitra-gradient-rotate-fast or .vitra-gradient-rotate-slow variants.
4s per rotation
2s per rotation
8s per rotation
Uses animation-timeline: view() for scroll-driven entry animations. Elements fade + slide as they enter the viewport. Progressive enhancement — falls back gracefully in unsupported browsers.
Native CSS light-dark() function for single-declaration theme switching. These boxes adapt automatically without @media (prefers-color-scheme).
Auto-switches with OS preference
15% accent + bg
10% accent + surface
All --vitra-* custom properties update instantly when switching themes.
Frosted glass with backdrop-filter and automatic fallbacks.
Default glass effect.
Enhanced blur.
Gentle overlay effect.
Glass with accent border.
Floating particles with glow effects. Configurable via JS API or data attributes.
Particles will appear here when spawned
Particles can also be configured via HTML data-vitra-particles attributes:
<div data-vitra-particles="5" data-vitra-particle-color="#ff6b6b">
<!-- 5 red particles appear here -->
</div>
<!-- v1.9: opt-in falling direction -->
<div data-vitra-particles="8" data-vitra-particle-direction="down">
<!-- 8 particles fade in and drift downward, then fade out -->
</div>Reveal animations, hover interactions, and full prefers-reduced-motion support.
Uses vitra-reveal — appears when scrolled into view.
Cascading entry via stagger delay.
Respects prefers-reduced-motion.
Lifts with shadow
Glows on hover
Scales on hover
Vitra automatically disables animations when users prefer reduced motion.
Test: Enable "Reduce motion" in your OS settings, then refresh. All animations will be disabled.
All Vitra components with token-only styling, glass variants, and built-in accessibility.
Surface + border.
Glassmorphism card.
Lifts on hover.
Content for the first tab.
Focus trapping, ESC close, overlay click close.
Programmatic notifications with auto-dismiss and type variants.
--vitra-font-size-xs: The quick brown fox
--vitra-font-size-sm: The quick brown fox
--vitra-font-size-base: The quick brown fox
--vitra-font-size-lg: The quick brown fox
--vitra-font-size-xl: The quick brown fox
--vitra-font-size-2xl: The quick brown fox