CSS Variables Generator

Build a complete CSS design token system for your project. Edit color, spacing, typography, and border-radius tokens and get a ready-to-use :root { } block with all your custom properties. Copy the output and paste it into your global stylesheet.

--color-:

CSS Output

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #8b5cf6;
  --color-accent: #f59e0b;
  --color-background: #ffffff;
  --color-surface: #f4f4f5;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-border: #e4e4e7;
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-family-sans: Inter, system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

Buy me a coffee

What are CSS custom properties?

CSS custom properties (also called CSS variables) are defined with a -- prefix in a :root block and referenced anywhere in your stylesheet with var(--name). They cascade and are scoped like any CSS property.

Design token categories

Colors — brand palette, semantic names (primary, background, text, border).
Spacing — consistent scale from xs to 3xl for margins, padding, gaps.
Typography — font sizes, weights, and families.
Border Radius — a shared rounding scale for UI components.

Related Tools

CSS Grid Generator

Build CSS grid layouts visually. Configure columns, rows, gaps, drag to create spans, and copy the generated CSS.

CSS Border Radius Generator

Visually generate border-radius CSS with independent corner controls and live preview.

CSS Text Shadow Generator

Create layered CSS text-shadow effects with live preview and one-click copy.

CSS Filter Generator

Generate CSS filter effects — blur, brightness, contrast, hue-rotate, saturate, sepia, and more — with a live image preview.

CSS Clip Path Generator

Generate CSS clip-path shapes interactively — polygons, circles, and ellipses — with a live preview. Drag control points.

CSS Animation Generator

Build CSS @keyframe animations visually with timing, easing, delay, and iteration controls.

CSS Flexbox Generator

Visual flexbox playground — configure flex-direction, flex-wrap, justify-content, align-items, and per-item properties.

CSS Box Shadow Generator

Build CSS box shadows visually with sliders. Add multiple layers, control blur, spread, color, and opacity.

CSS Gradient Generator

Build beautiful CSS linear and radial gradients visually. Customize colors, stops, and angle — copy the ready CSS.

CSS Gradient Text Generator

Create gradient text effects online. Pick 2–4 colors, choose direction, and copy the ready-to-use CSS background-clip code.