CSS Variables Generator
Visually generate CSS custom property code with Tailwind CSS v4 format export support.
Color Variables
rgb(99, 102, 241)hsl(239, 84%, 67%)
rgb(139, 92, 246)hsl(258, 90%, 66%)
rgb(244, 114, 182)hsl(329, 86%, 70%)
rgb(255, 255, 255)hsl(0, 0%, 100%)
rgb(24, 24, 27)hsl(240, 6%, 10%)
rgb(244, 244, 245)hsl(240, 5%, 96%)
rgb(228, 228, 231)hsl(240, 6%, 90%)
Font Variables
Spacing Variables
Radius Variables
Generated Code
Usage Guide
Variable Types
Supports four types of CSS custom properties: color, font, spacing, and radius. Color variables auto-calculate RGB and HSL values, spacing variables provide visual preview, and radius variables show real-time border-radius effects.
Output Format
!Tailwind CSS v4: Uses the @theme directive per v4 spec; Standard CSS: Outputs :root block; SCSS: Uses $ variable syntax
Color Picker
Click the color swatch to open the system color picker, or enter a HEX value in the input field manually. Items with an empty variable name are automatically filtered out.