CSS Variables Generator
Create and manage CSS custom properties (CSS variables) with visual controls for colors, sizes, fonts, and more.
CSS Variables
#3b82f6
Type: color
16px
Type: size
Generated CSS
:root {
--primary-color: #3b82f6;
--font-size-base: 16px;
}Preview
Sample Heading
This is a sample paragraph to demonstrate the CSS variables in action. The colors, fonts, and spacing are all controlled by the variables you've defined.