CSS Variables Live Editor

New

Define and export design tokens for your project. Choose colors, spacing, and fonts, then download as CSS custom properties, JSON, or SCSS variables.

Design CSS variables design tokens generator theme

Define a set of colors for light and dark themes. Get the CSS custom properties snippet. Toggle live.

Design CSS variables dark mode generator theme

Paste your CSS and see a static fallback version where var() is replaced with the default value. For legacy support.

Developer Tools CSS variables fallback legacy polyfill

Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.

Color Tool CSS variables generator palette swatch

Pick colors for the shadcn/ui design system and generate the complete CSS variable theme file. Copy into your project.

Developer Tools CSS variables generator shadcn/ui theme

Tag: CSS Variables Live Editor