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 Gratuito Sem cadastro

CSS Custom Properties Generator

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

Carregando ferramenta…

Sobre esta ferramenta

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

Como usar

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.

Perguntas frequentes

Ferramentas relacionadas

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.

Gerador de QR Code

Gere paletas de cores harmoniosas — complementares, triádicas, análogas e split-complementares — a partir de qualquer cor base.

Gerador de QR Code

Gere paletas de cores harmoniosas a partir de uma cor base usando regras de complementaridade, analogia, tríade e outras harmonias.

Folha de Dicas do Tailwind CSS

Referência pesquisável interativa para mais de 200 classes de utilitários do Tailwind CSS v3.