CV
CSS Variables Generator
Define and preview CSS custom properties in real time — build your :root block visually and see variables applied to a sample card component.
More CSS Tools
Design System Preview
This card is styled entirely with your CSS custom properties. Adjust the variables above to see them cascade through this component in real time — including links.
How to Use CSS Variables Generator
Create and experiment with CSS custom properties (variables) without touching a code editor. Define up to 4 variables — including a primary colour, border radius, spacing unit, and base font size — using colour pickers for colour values and text inputs for size values. A live preview card component (title, paragraph, and button) renders on the right, styled entirely with your variables. Change any variable value and the preview updates instantly, showing exactly how your design tokens cascade through a component. When you are ready, click Copy CSS to get the complete `:root { }` block ready to paste into your stylesheet.
About CSS Variables Generator
CSS custom properties, commonly called CSS variables, are arguably the single most transformative feature added to the CSS language since flexbox. Introduced in 2015 and universally supported since roughly 2017, they solved a problem that had plagued stylesheet authors for two decades: the inability to define a value once and reuse it across an entire stylesheet without a preprocessor. Before custom properties, the only way to reuse a colour or a spacing value was to copy-paste it everywhere — or to use a CSS preprocessor like Sass or Less, which would compile variables into static values at build time. Both approaches had the same fatal flaw: once the CSS was shipped, the values were frozen. You could not change a brand colour on the fly in response to a user preference, a theme toggle, or a dark-mode media query.
CSS custom properties changed all that. They are live — they can be updated at runtime with JavaScript, they respond to media queries and container queries, and they participate in the CSS cascade just like any other property. This means you can define `--primary-colour: #3B82F6;` in the `:root` selector, use it in a hundred different rules across your stylesheet with `color: var(--primary-colour);`, and then override it inside a `.dark` class or a `@media (prefers-color-scheme: dark)` query to instantly recolour the entire page. No JavaScript needed, no recompilation, no page refresh.
The syntax is straightforward but has a few details that trip people up. A custom property name must start with two dashes: `--my-variable`. The name is case-sensitive (`--primary` and `--Primary` are different variables, though using mixed-case names is discouraged). The value can be any valid CSS value — a colour, a length, a percentage, a string, a full shorthand declaration, even another `var()` reference. Custom properties are defined in a CSS rule, typically on `:root` (the `<html>` element) for global scope, but they can be scoped to any selector — defining `--card-radius: 12px` on `.card` makes it available only to that class and its descendants.
The `var()` function is how you consume a custom property. Its signature is `var(--name, fallback)`, where the fallback is optional. For example, `color: var(--primary-colour, #333)` uses the value of `--primary-colour` if it is defined, or falls back to `#333` if it is not. This fallback mechanism is a built-in safety net that makes custom properties safe to use even in components that might be used in contexts where the variable is not defined.
This tool exists because understanding CSS variables intellectually is different from seeing them in action. Reading `--primary: #3B82F6` in a code snippet tells you nothing about how that blue will look on a button, in a card border, or as a heading colour. The tool bridges that gap with a live preview card — a miniature UI component (heading, paragraph, button) that consumes your variables in real time. Change `--primary` to a warm amber and the button instantly shifts from blue to gold, the heading underline changes colour, and the card border picks up the new hue. Change `--radius` from 8px to 24px and the button and card corners round in unison. This immediate feedback is how you develop an intuition for what makes a good design token.
The four variable slots in this tool were chosen to represent the most impactful design tokens in any UI system:
- **--primary (colour):** The brand colour that drives buttons, links, borders, and accent elements. Changing this one variable recolours a significant portion of the preview. In real-world design systems, there are typically multiple colour tokens (primary, secondary, accent, surface, text), but primary is the one that defines the personality of the interface.
- **--radius (size):** The border-radius applied to cards, buttons, and input fields. This single number controls how rounded or sharp the entire interface feels. A small radius (4-8px) reads as professional and serious (think Stripe or GitHub). A large radius (16-24px) reads as friendly and playful (think Duolingo or Notion).
- **--spacing (size):** The padding and gap between elements. This is the unsung hero of design consistency. When every component uses the same spacing unit, the interface feels cohesive and rhythmical. When different components use arbitrary spacing values, the result feels sloppy, no matter how beautiful the colours are.
- **--font-size (size):** The base font size for body text. This typically sits at 16px (the browser default), but some designs use 15px for a denser feel or 18px for a more spacious, reading-oriented layout. Changing this variable scales all text in the preview proportionally.
The tool\'s output formats these four variables as a `:root { }` block — the standard location for global design tokens. You can copy the block and paste it into the top of your main stylesheet, then reference the variables throughout your CSS with `var(--primary)`, `var(--radius)`, etc. Because the output is standard CSS custom properties, it works in any project regardless of framework: vanilla HTML, React, Vue, Angular, Svelte, even plain HTML emails (with limited support).
One of the most powerful patterns enabled by CSS variables is the ability to build truly themeable components. A single button component can have its styles written entirely in terms of CSS variables — `background: var(--btn-bg, var(--primary))`, `border-radius: var(--btn-radius, var(--radius))`, `padding: var(--btn-padding, var(--spacing))` — so that it adapts to whatever theme is currently active without any class-switching. This tool\'s preview demonstrates exactly this pattern: the card, heading, and button all derive their styles from the same four variables, showing how a small set of well-chosen tokens can govern a large surface area of design with minimal code.
Details & Tips
Variable-by-variable breakdown and preview architecture:
**--primary (colour variable):** A colour picker sets the primary colour. Default: #3B82F6 (Tailwind blue-500). The value is output as a 6-digit hex. In the preview, --primary drives: the button background, the heading accent underline, the card border colour (at reduced opacity), and the paragraph link colour. Changing this one variable shows how a single colour token propagates through multiple elements.
**--radius (size variable):** A range slider (0-48px) with a number input. Default: 8px. In the preview, --radius is applied to the card's border-radius and the button's border-radius, showing how the same rounding token creates visual cohesion between nested components.
**--spacing (size variable):** A range slider (4-48px) with a number input. Default: 16px. In the preview, --spacing controls the card's internal padding, the gap between the heading and paragraph, and the gap between the paragraph and button. This demonstrates how a single spacing token creates consistent rhythm throughout a component.
**--font-size (size variable):** A range slider (12-28px) with a number input. Default: 16px. In the preview, --font-size sets the base font size of the paragraph text. The heading is scaled proportionally (1.5× the base size) and the button label is slightly smaller (0.875×), demonstrating the common pattern of deriving all font sizes from a single base value.
**Preview card component:** A self-contained mini-UI consisting of:
- A card container with `border: 1px solid` coloured by --primary at 20% opacity, rounded with --radius, padded with --spacing.
- A heading ("Design System Preview") with a 3px bottom border in --primary colour, font size 1.5× --font-size.
- A paragraph of sample text ("This card is styled entirely with CSS custom properties...") at --font-size, with a link coloured --primary.
- A button labelled "Call to Action" with background --primary, border-radius --radius, padding --spacing/2.
The entire card is rendered in a preview area with a subtle grey background so the card stands out clearly. Changes to any variable update the preview instantly because the card's inline styles reference the CSS variables via Alpine's `:style` binding.
**CSS output generation:**
```css
:root {
--primary: #3B82F6;
--radius: 8px;
--spacing: 16px;
--font-size: 16px;
}
```
The output is a clean, copy-pastable block. Each variable is on its own line. There is a semicolon after each declaration. The formatting matches what you would write by hand in a stylesheet.
**Variable naming:** The variable names are fixed to the four listed above. They are chosen to be short, memorable, and aligned with common design-token naming conventions. Users who want different names can edit the output manually.
**Colour picker integration:** The --primary colour uses a native `<input type="color">` picker next to a text input showing the hex value. Both are synchronised — changing the picker updates the text input, and typing a valid hex updates the picker.
**Invalid input handling:** If a non-numeric value is typed into the --radius, --spacing, or --font-size text inputs, the slider defaults to its current valid value and the CSS output excludes the invalid variable until corrected. The preview uses the current valid value to avoid rendering broken styles.
**Edge cases:**
- Empty variable value: the variable is omitted from the output and the preview falls back to a hardcoded default via the `var(--name, fallback)` syntax.
- Extremely large spacings (e.g. 200px): the preview card scrolls if the content becomes taller than the preview container.
- Very light primary colours (near white): the button text automatically switches between white and dark text based on the primary colour's luminance to maintain WCAG AA contrast.
- Decimal values: font size and spacing accept decimals (e.g. 15.5px), but border-radius is rounded to the nearest integer because sub-pixel border-radius causes anti-aliasing inconsistencies.
Frequently Asked Questions
What are CSS custom properties (variables)?
They are named values defined with a `--name` prefix that can be reused throughout a stylesheet using the `var(--name)` function. Unlike preprocessor variables, CSS custom properties are live in the browser — they can be changed at runtime and respond to media queries and the cascade.
How do I use the CSS variables this tool generates?
Copy the `:root { }` block into the top of your main stylesheet. Then reference the variables anywhere in your CSS: `color: var(--primary);`, `border-radius: var(--radius);`, `padding: var(--spacing);`, `font-size: var(--font-size);`.
Can I add more variables than the four provided?
Yes — this tool provides four common variables for preview purposes. You can add more variables to the `:root` block manually in your stylesheet. The syntax is the same: `--your-name: your-value;`.
What does the preview card show exactly?
It shows a sample UI component (card with heading, paragraph, link, and button) styled entirely with the four variables you define. Changing any variable updates the preview instantly, showing how design tokens cascade through a real component.
Can I change the variable names?
The tool uses fixed names (--primary, --radius, --spacing, --font-size) for the preview to work. After copying the output, you can rename the variables to match your project's naming convention — just update both the definition and all references.
What is the difference between CSS variables and Sass variables?
Sass variables are compiled at build time and become static values in the output CSS. CSS custom properties are live at runtime — they can be updated with JavaScript, respond to media queries, and participate in the cascade. Use CSS variables for values that need to change dynamically; use Sass variables for values that are truly constant.
Do CSS variables work in all browsers?
Yes — CSS custom properties have been supported unprefixed in all major browsers since 2017. Internet Explorer 11 does not support them, but IE11 has been end-of-life since June 2022 and no longer receives security updates.
Can I use CSS variables for responsive design?
Yes — redefine variables inside media queries to create responsive behaviour. For example, `@media (min-width: 768px) { :root { --spacing: 24px; --font-size: 18px; } }` increases spacing and font size on larger screens.
Can CSS variables be used for dark mode?
Yes — this is one of the most common use cases. Redefine your colour variables inside a `@media (prefers-color-scheme: dark)` or a `.dark` class: `:root { --primary: #60A5FA; }` switches from a dark blue to a lighter blue appropriate for dark backgrounds.
What is the var() fallback and when should I use it?
The second argument to `var()` is a fallback value used when the variable is not defined: `var(--primary, #333)`. Always include a fallback for variables that might be used in contexts where the variable definition might be missing, such as in a shared component library.
Is my data sent to a server?
No — the CSS variables generator runs entirely in your browser. Nothing you type or design is transmitted anywhere.
What makes a good set of design tokens?
Start small with a few high-impact tokens — colour, spacing, radius, and font size cover 80% of UI styling decisions. Add more tokens gradually as patterns emerge in your design. The goal is consistency, not exhaustiveness: every token you add should be used in at least three places.
Part of These Collections
Also Available As
css variables generator, css custom properties, css variable builder, design tokens generator, css root variables, css var generator, theme variables css, css design tokens, css property generator, :root css generator
Found a Problem?
Let us know if something with CSS Variables Generator isn't working as expected.
Something went wrong. Please try again.
Thanks — we'll take a look.