BuildUtilities

CSS Variables Theme Generator – Free Online Tool

Generate a :root CSS custom properties theme with primary, secondary, background, text, and accent colors. Preview light and dark modes.

✦ FreeNo SignupInstantCSSDesign Tokens & CSS Variables Guide

Runs in your browser. Nothing you type or paste is uploaded, saved, or sent to an AI.

Theme Preview

This is body text using the theme's text color.

PrimarySecondaryAccent
:root {
  --color-primary: #0bbcb7;
  --color-secondary: #6366f1;
  --color-background: #ffffff;
  --color-text: #1a1f2e;
  --color-accent: #f59e0b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #14d9d2;
    --color-secondary: #818cf8;
    --color-background: #0f172a;
    --color-text: #f1f5f9;
    --color-accent: #fbbf24;
  }
}

How to Use CSS Variables Theme Generator

  1. 1

    Pick Colors

    Choose primary, secondary, background, text, and accent colors.

  2. 2

    Preview

    Toggle between light and dark previews.

  3. 3

    Copy

    Copy the :root CSS variables block.

Common Use Cases

  • ✦Setting up design tokens for a new project
  • ✦Creating consistent color themes
  • ✦Building dark/light mode support

Share

Share a link to this tool. Results can be passed via URL parameters.

https://buildutilities.com/share/css-variables-theme-generator

Frequently Asked Questions

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator▧ CSS Gradient Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator
View all CSS tools
Tip Jar