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

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