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 無料サインアップ不要

CSS Custom Properties Generator

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

ツールを読み込み中…

このツールについて

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`.

使い方

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.

このツールについて

使い方

よくある質問