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 Gratis Sin registro

CSS Custom Properties Generator

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

Cargando la herramienta…

Acerca de esta herramienta

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

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.

Generador de códigos QR

Genere paletas de colores armoniosas — complementarias, triádicas, análogas y complementarias divididas — a partir de cualquier color base.

Generador de códigos QR

Genere paletas de colores armoniosas a partir de un color base usando reglas de complementario, análogo, triádico y otras armonías.

Hoja de referencia de Tailwind CSS

Referencia interactiva con búsqueda de más de 200 clases de utilidad de Tailwind CSS v3.