CSS Variables Generator: Build a Design System in Minutes

Generate a complete set of CSS custom properties for your design system.

Set 8 colors, border radius, font size. See a live preview. Copy the :root block.

Includes: colors, spacing scale, typography scale, border radius scale.

CSS Variables Generator

CSS toolkit (15 generators!):

• Gradient, Border Radius, Box Shadow, Flexbox, Grid, Animation, Transition, Filter, Text Gradient, Clip Path, Specificity, Glassmorphism, Text Shadow, PX to REM, Variables

Full toolkit (400+ tools): devtools-site-delta.vercel.app