What are CSS custom properties (variables)?

They're author-defined values declared with a `--name` syntax and read with `var(--name)`. Unlike Sass variables, they're live in the browser — you can read and change them with JavaScript, and they cascade and inherit like any other CSS property.

Why declare them on :root?

:root targets the element, which is the highest point in the document, so variables declared there are available everywhere. Scoping variables to a class instead (e.g. `.dark-theme`) lets you override just those variables for that subtree, which is how most CSS theme-switchers work.

Can variable values reference other variables?

Yes — type `var(--color-primary)` as a value and it resolves at use-time, so a variable can build on another one (e.g. `--button-bg: var(--color-primary);`).

What happens if a variable name is invalid?

Names are automatically lowercased and any character that isn't a letter, number, or hyphen is converted to a hyphen, since custom property names can't contain spaces or most punctuation.

Is my data uploaded anywhere?

No — the CSS block is generated locally in your browser from the values you type. Nothing is sent to a server.

CSS VARIABLES GENERATOR

Build a set of named custom properties and copy a ready :root { ... } block.

Scope

--:

CSS

:root {
  --color-primary: #ff6a35;
  --color-bg: #201d19;
  --color-text: #f2e9dc;
  --space-md: 1rem;
  --radius-sm: 4px;
  --font-sans: system-ui, sans-serif;
}

Usage example

color: var(--color-primary);

How to generate CSS variables

1
Set the scope selector (defaults to :root, but you can target any class or element).
2
Edit the name and value of each variable — a color swatch appears automatically for hex values.
3
Click + Add variable for more rows, or the ✕ to remove one.
4
Copy the generated CSS block and paste it at the top of your stylesheet.

Questions

What are CSS custom properties (variables)?: They're author-defined values declared with a `--name` syntax and read with `var(--name)`. Unlike Sass variables, they're live in the browser — you can read and change them with JavaScript, and they cascade and inherit like any other CSS property.
Why declare them on :root?: :root targets the <html> element, which is the highest point in the document, so variables declared there are available everywhere. Scoping variables to a class instead (e.g. `.dark-theme`) lets you override just those variables for that subtree, which is how most CSS theme-switchers work.
Can variable values reference other variables?: Yes — type `var(--color-primary)` as a value and it resolves at use-time, so a variable can build on another one (e.g. `--button-bg: var(--color-primary);`).
What happens if a variable name is invalid?: Names are automatically lowercased and any character that isn't a letter, number, or hyphen is converted to a hyphen, since custom property names can't contain spaces or most punctuation.
Is my data uploaded anywhere?: No — the CSS block is generated locally in your browser from the values you type. Nothing is sent to a server.