CSS Variables Generator
Build design tokens as CSS custom properties — color, typography, spacing, radius, shadows.
<!-- Colors -->
<div class="cv-section" id="cv-section-colors">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#ede9fe;">🎨</span>
Colors
</div>
<div class="cv-row">
<span class="cv-row-label">Primary</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-primary" value="#2563eb"></div>
<input type="text" class="cv-hex-input" id="h-primary" value="#2563eb" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Secondary</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-secondary" value="#7c3aed"></div>
<input type="text" class="cv-hex-input" id="h-secondary" value="#7c3aed" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Accent</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-accent" value="#f59e0b"></div>
<input type="text" class="cv-hex-input" id="h-accent" value="#f59e0b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Background</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-bg" value="#ffffff"></div>
<input type="text" class="cv-hex-input" id="h-bg" value="#ffffff" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Surface</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-surface" value="#f8fafc"></div>
<input type="text" class="cv-hex-input" id="h-surface" value="#f8fafc" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Text</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-text" value="#1e293b"></div>
<input type="text" class="cv-hex-input" id="h-text" value="#1e293b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Text Muted</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-text-muted" value="#64748b"></div>
<input type="text" class="cv-hex-input" id="h-text-muted" value="#64748b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">Border</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-border" value="#e2e8f0"></div>
<input type="text" class="cv-hex-input" id="h-border" value="#e2e8f0" maxlength="7">
</div>
</div>
</div>
<!-- Typography -->
<div class="cv-section" id="cv-section-typography">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#fef9c3;">T</span>
Typography
</div>
<div class="cv-row">
<span class="cv-row-label">Font Family</span>
<select class="cv-select-input" id="t-font-family">
<option value="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">System UI</option>
<option value="'Inter', sans-serif">Inter</option>
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="'Playfair Display', serif">Playfair Display</option>
<option value="Georgia, 'Times New Roman', serif">Georgia Serif</option>
<option value="'Fira Code', 'Consolas', monospace">Fira Code Mono</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">Base Size</span>
<input type="text" class="cv-text-input" id="t-base" value="1rem">
</div>
<div class="cv-row">
<span class="cv-row-label">Size SM</span>
<input type="text" class="cv-text-input" id="t-sm" value="0.875rem">
</div>
<div class="cv-row">
<span class="cv-row-label">Size LG</span>
<input type="text" class="cv-text-input" id="t-lg" value="1.125rem">
</div>
<div class="cv-row">
<span class="cv-row-label">Size XL</span>
<input type="text" class="cv-text-input" id="t-xl" value="1.25rem">
</div>
<div class="cv-row">
<span class="cv-row-label">Size 2XL</span>
<input type="text" class="cv-text-input" id="t-2xl" value="1.5rem">
</div>
<div class="cv-row">
<span class="cv-row-label">Weight Normal</span>
<select class="cv-select-input" id="t-weight-normal">
<option value="300">300 Light</option>
<option value="400" selected>400 Regular</option>
<option value="500">500 Medium</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">Weight Bold</span>
<select class="cv-select-input" id="t-weight-bold">
<option value="600">600 Semibold</option>
<option value="700" selected>700 Bold</option>
<option value="800">800 Extrabold</option>
<option value="900">900 Black</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">Line Height</span>
<input type="text" class="cv-text-input" id="t-leading" value="1.6">
</div>
<div class="cv-row">
<span class="cv-row-label">Leading Tight</span>
<input type="text" class="cv-text-input" id="t-leading-tight" value="1.25">
</div>
</div>
<!-- Spacing -->
<div class="cv-section" id="cv-section-spacing">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#dcfce7;">↔</span>
Spacing
</div>
<div class="cv-row">
<span class="cv-row-label">XS</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-xs" value="4px">
</div>
<div class="cv-row">
<span class="cv-row-label">SM</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-sm" value="8px">
</div>
<div class="cv-row">
<span class="cv-row-label">MD</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-md" value="16px">
</div>
<div class="cv-row">
<span class="cv-row-label">LG</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-lg" value="24px">
</div>
<div class="cv-row">
<span class="cv-row-label">XL</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-xl" value="32px">
</div>
<div class="cv-row">
<span class="cv-row-label">2XL</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-2xl" value="48px">
</div>
<div class="cv-row">
<span class="cv-row-label">3XL</span>
<input type="text" class="cv-text-input cv-spacing" id="sp-3xl" value="64px">
</div>
</div>
<!-- Border Radius -->
<div class="cv-section" id="cv-section-radius">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#fce7f3;">⭘</span>
Border Radius
</div>
<div class="cv-row">
<span class="cv-row-label">SM</span>
<input type="text" class="cv-text-input cv-radius" id="r-sm" value="4px">
</div>
<div class="cv-row">
<span class="cv-row-label">MD</span>
<input type="text" class="cv-text-input cv-radius" id="r-md" value="8px">
</div>
<div class="cv-row">
<span class="cv-row-label">LG</span>
<input type="text" class="cv-text-input cv-radius" id="r-lg" value="12px">
</div>
<div class="cv-row">
<span class="cv-row-label">XL</span>
<input type="text" class="cv-text-input cv-radius" id="r-xl" value="16px">
</div>
<div class="cv-row">
<span class="cv-row-label">Full (pill)</span>
<input type="text" class="cv-text-input cv-radius" id="r-full" value="9999px">
</div>
</div>
<!-- Shadows -->
<div class="cv-section" id="cv-section-shadows">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#e0f2fe;">☉</span>
Shadows
</div>
<div class="cv-row">
<span class="cv-row-label">SM</span>
<input type="text" class="cv-text-input cv-shadow" id="sh-sm" value="0 1px 3px rgba(0,0,0,0.1)">
</div>
<div class="cv-row">
<span class="cv-row-label">MD</span>
<input type="text" class="cv-text-input cv-shadow" id="sh-md" value="0 4px 12px rgba(0,0,0,0.12)">
</div>
<div class="cv-row">
<span class="cv-row-label">LG</span>
<input type="text" class="cv-text-input cv-shadow" id="sh-lg" value="0 8px 24px rgba(0,0,0,0.15)">
</div>
<div class="cv-row">
<span class="cv-row-label">XL</span>
<input type="text" class="cv-text-input cv-shadow" id="sh-xl" value="0 16px 48px rgba(0,0,0,0.2)">
</div>
</div>
<div class="cv-preview-title">Live Preview</div>
<div class="cv-preview-area">
<div class="cv-preview-inner" id="cv-preview-inner">
<!-- Rendered by JS -->
</div>
</div>
<div class="cv-output-section">
<div class="cv-output-header">
<span class="cv-output-label">Generated CSS</span>
<button class="cv-copy-btn" id="cv-copy-btn">Copy CSS</button>
</div>
<div class="cv-code-box" id="cv-code-box"></div>
</div>
Related Tools
Box Shadow Generator Css Animation Generator Css Button Generator