v1.13.5

Vitra CSS

Cinematic glassmorphism with a living landscape behind it.
Zero dependencies, pure CSS.

Get Started GitHub
Quick Start

Beautiful by default. Instant to ship.

Glassmorphism, cinematic animations, and a full design system — all in a single 20 kB stylesheet. No build step, no config, no npm install. Drop one line into any HTML page and start building.

  • 20 kB brotli
  • Zero dependencies
  • No build step
1. Add the stylesheet
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.13.5/dist/vitra.min.css">
2. Add the script (optional — for modals, tooltips, particles, toasts, dropdowns & more)
<script src="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.13.5/dist/vitra.min.js"></script>
3. Use a component
<div class="vitra-card vitra-glass">Hello, Vitra!</div>
That's it. Full example:
<!DOCTYPE html>
<html data-theme="auto">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DesvoSoft/Vitra@v1.13.5/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.13.5/dist/vitra.min.js"></script>
</body>
</html>

That's it — no build step, no configuration. GitHub →

1.13 Motion that costs nothing

Everything that moves in the background now runs on the compositor: no repaints, no per-frame style work, paused the moment it leaves the screen. What that buys is headroom to make the things you touch feel alive.

Things arrive with a spring

Three easing tokens, same distance, same duration. Modals, toasts, drawers and menus spring in and ease out.

--vitra-ease-luxury
--vitra-ease-spring-soft
--vitra-ease-spring

Themes that bloom

Pick one. The new theme grows out of the button you pressed, over a frozen snapshot of the old one — one View Transition, nothing in the page repaints per frame.

button.onclick = (event) =>
  Vitra.theme.set('neon', { transition: true, origin: event });

Light on the machine

The hero above — stars twinkling, ranges drifting, moon breathing — measured on an idle page. Every moving layer animates on the compositor: nothing is repainted and the main thread stays idle, while the ranges glide at sub-pixel precision.

Repaints / second
2100
Main thread busy
137 ms/s3 ms/s

v1.12 v1.13.3 · headless Chromium, 1600×900, dark theme

Cinematic Effects

Five premium visual effects added in v1.4.0 — inspired by Stripe, Linear, and Raycast aesthetics.

NEW Animated Mesh Gradient

Radial mesh gradient with 3 blobs that shift position continuously via vitra-mesh-shift keyframes.

Live Preview 16s animation loop

NEW Floating Glow Orbs

Large blur spheres (300–400px) with 80px blur that float in parallax via vitra-float keyframes.

Floating Orbs 18–25s parallax float

NEW Animated Gradient Text

Text with animated gradient via background-clip: text and vitra-text-shift keyframes.

Edit this text — it uses gradient!

NEW Spinning Border Glow

Animated conic-gradient border via oversized ::before with spinning keyframe. Inner area masked via ::after.

Border Glow Card Conic-gradient rotating

Scenery

A CSS-only mountain landscape. Faceted ranges with light-facing planes over a still, dark foreground, a star field that shimmers against a steady far plane, a moon whose corona breathes. It fades up when it enters the screen, separates into depth planes as it scrolls away, and re-colours itself from the theme's accent.

A window, not a card This scene is one empty div. The mountains, clouds, and stars all drift behind this glass at different speeds — same direction, so it reads as one consistent wind. Switch themes — the whole scene re-colors itself.

Markup

One element. With vitra.js on the page the eight layers are written for you; use .vitra-scenery for a full-page backdrop or .vitra-scenery-inline inside any position: relative container. No JavaScript? The docs have the eight-layer markup — the scene itself is pure CSS.

<div class="vitra-scenery"></div>

Direct it with tokens:

.hero {
  --vitra-scenery-intro: 1.5;   /* entrance fade length, 0 = none */
  --vitra-scenery-depth: 1;     /* scroll parallax strength */
  --vitra-scenery-speed: 1;     /* drift speed */
  --vitra-scenery-halo-x: 76%;  /* moon position */
}

Theme Studio

All 7 themes with tinted neutrals — every surface carries a trace of the accent hue.

Dark

Surface Card

This card uses --vitra-color-surface — notice the subtle tint.

Accent
Glass surface with backdrop-filter
Light
Dark
Pastel
Neon
Ocean
Emerald
Click a swatch to preview the theme — use the navbar dropdown to apply it permanently

Modern CSS Features

Vitra leverages 2026 CSS APIs with progressive enhancement fallbacks.

Popover Native Popover API

Uses showPopover() when supported, falls back to class-based toggle.

Entry @starting-style

Elements animate in from their initial state using @starting-style.

Color oklch() Colors

Perceptually uniform color interpolation via --vitra-color-accent-oklch.

oklch lightness ramp — perceptually uniform

CSS Shaders

Pure-CSS shader-like effects — no WebGL, no Three.js, no JS canvas. Progressive enhancement with modern CSS APIs.

NEW Noise Overlay

Grain texture via SVG feTurbulence filter rendered as a data URI background. mix-blend-mode: overlay for cinematic film grain.

NEW Progress Ring

Circular progress indicator using conic-gradient with smooth animation via @property --vitra-progress-ring-value. Set CSS variable as percentage.

0%
75%

NEW Shape Morph

clip-path polygon morphing animation: diamond → square → triangle → hexagon → diamond. 12s ease-in-out loop.

NEW Gradient Rotate

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.

Rotating Border

4s per rotation

Fast Spin

2s per rotation

Slow Spin

8s per rotation

NEW Scroll-Driven Reveal

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.

Fade Up

From Left

From Right

Scale In

NEW light-dark() Utility

Native CSS light-dark() function for single-declaration theme switching. These boxes adapt automatically without @media (prefers-color-scheme).

light-dark bg/text

Auto-switches with OS preference

color-mix accent

15% accent + bg

color-mix surface

10% accent + surface

Design Tokens

All --vitra-* custom properties update instantly when switching themes.

Color Tokens

Spacing Scale

Border Radius

Shadows

Glassmorphism

Frosted glass with backdrop-filter and automatic fallbacks.

Standard Glass

Default glass effect.

Strong Glass

Enhanced blur.

Subtle Glass

Gentle overlay effect.

Colored Border

Glass with accent border.

Glass Cards with Hover

Glass Card 1

Hover to see lift + glow.

Glass Card 2

Cards with glassmorphism.

Glass Card 3

Responsive + accessible.

Configurable Particles

Floating particles with glow effects. Configurable via JS API or data attributes.

Particle Controls

Device limit: 40 (15 on mobile)
Active: 0 | Available: 40 | Max: 40

Particles will appear here when spawned

Data-Attribute Particles

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>

Motion & Animations

Reveal animations, hover interactions, and full prefers-reduced-motion support.

Reveal on Scroll

Uses vitra-reveal — appears when scrolled into view.

Staggered Reveal

Cascading entry via stagger delay.

Smooth Transitions

Respects prefers-reduced-motion.

Hover Interactions

Hover Lift

Lifts with shadow

Hover Glow

Glows on hover

Hover Scale

Scales on hover

Accessibility: prefers-reduced-motion

Vitra automatically disables animations when users prefer reduced motion.

Test: Enable "Reduce motion" in your OS settings, then refresh. All animations will be disabled.

Component Showcase

All Vitra components with token-only styling, glass variants, and built-in accessibility.

Buttons

Cards

Standard Card

Surface + border.

Glass Card

Glassmorphism card.

Hover Card

Lifts on hover.

Form Elements

Tabs

Panel 1

Content for the first tab.

Modals

Focus trapping, ESC close, overlay click close.

Tooltips

Toasts

Programmatic notifications with auto-dismiss and type variants.

Progress Bars

Badges

Default Primary Success Warning Error Info
Small Default Large

Avatars

JD
AB
CD

Typography Scale

--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

Navigation