What are CSS custom properties?

CSS custom properties (also called CSS variables) are entities defined by authors beginning with -- that can be reused throughout a stylesheet using the var() function. They enable centralized theming and are natively supported in all modern browsers.

How does the Import feature work?

Paste any CSS text containing --variable: value declarations into the Import panel and click Parse. The tool uses a regex to extract all custom property definitions and adds them to the corresponding section based on naming conventions (--color-, --font-, --spacing-, etc.).

What is the Tailwind export format?

The Tailwind export produces a theme.extend object literal you can paste inside module.exports in tailwind.config.js. Color and spacing tokens are mapped to the appropriate Tailwind theme keys.

Can I save my token system?

Your token set is automatically saved to localStorage as you edit, so it persists across browser sessions. Use the Export button to save a permanent copy in your preferred format.

Design Free No signup

CSS Custom Properties Generator

Build a complete CSS design token system with colors, typography, spacing, shadows, and export to CSS, SCSS, JS, or Tailwind.

Loading tool…

About this tool

Design a complete CSS custom properties (design token) system without writing code by hand. Organize tokens into seven sections: Colors, Typography (font sizes, families, weights, line heights), Spacing scale, Border Radius, Box Shadows, Z-Index layers, and Breakpoints. Add, remove, and edit token names and values in each section using the interactive table editor. A live preview panel shows color swatches, typography specimens, spacing blocks, and shadow examples that update as you type. Paste an existing CSS block into the Import panel to automatically parse all `--variable: value` declarations and populate the editor. Export your token system in four formats: a CSS `:root { }` block, SCSS `$variable: value` declarations, a JavaScript/TypeScript object literal, or a Tailwind `theme.extend` configuration block ready to paste into `tailwind.config.js`.

How to use

1 Click a section tab (Colors, Typography, Spacing, etc.) to start adding tokens.
2 Click 'Add Token' to create a new row — type the token name and value.
3 Watch the live preview update instantly as you edit values.
4 To import existing tokens, paste your CSS into the Import panel and click Parse.
5 Choose an export format (CSS, SCSS, JS, or Tailwind) and click Copy to clipboard.

Frequently Asked Questions

Related tools

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Color Palette Generator

Generate harmonious color palettes — complementary, triadic, analogous, and split-complementary — from any base color.

Color Scheme Generator

Generate harmonious color palettes from a base color using complementary, analogous, triadic, and other harmony rules.

Tailwind CSS Cheat Sheet

Interactive searchable reference for 200+ Tailwind CSS v3 utility classes.