← Home
中文

CSS Variables Generator

Generate design token systems as CSS custom properties

About design tokens

  • Design tokens are named values that represent UI design decisions (colors, spacing, typography, etc.)
  • CSS custom properties (CSS variables) let you reference these tokens throughout your stylesheets
  • This tool generates a color scale by lightening/darkening your brand color in even steps (50, 100, ..., 900)
  • Plus consistent spacing, typography, border radius, and shadow tokens

Output formats

  • CSS Custom Properties: :root { --brand-500: #3b82f6; }
  • SCSS Variables: $brand-500: #3b82f6;
  • Less Variables: @brand-500: #3b82f6;
  • JSON Tokens: for tools like Style Dictionary, Figma Tokens