CSS Variable Name Generator
Generates a random CSS custom-property (variable) name in the shape a design system would give it, e.g. --border-disabled-300 or --size-md — for documentation or design-system examples.
What this generator does
Produces a CSS custom property name in the double-hyphen form, following the kebab-case convention design systems use. Useful when sketching a token set or writing documentation examples.
How to use this tool
- Press generate for a CSS variable name.
Worked examples
- Format
- --weight-code, --border-disabled-300 and --size-md — three consecutive draws from three different families
Common use cases
- Design-system documentation examples
- Teaching CSS variable naming conventions
- Placeholder code examples
How this generator works
A name is assembled in the double-hyphen form CSS requires from one of five token families — colour roles, spacing and sizing, shadows, typography and motion. Each family has its own qualifiers, so a colour role can take a ramp step (--surface-muted-200) and a spacing token takes a t-shirt size (--space-md), and the two are never crossed into a name that means nothing. That gives 1,198 possible names. The category-then-variant order is the useful part: names that sort alphabetically also group by what they are.
Limitations and good to know
- An example name, not a value. A custom property with no value declared on a scope that contains it does nothing.
- The five families are equally likely, not the 1,198 names: the colour family holds 1,100 of them and still comes up only one press in five, so spacing, shadow, type and motion names repeat far sooner.
- Nothing checks the name against a stylesheet, so a generated name can collide with one already in use — and the later declaration silently wins.
- Custom properties are case-sensitive, unlike the rest of CSS. --Colour and --colour are two different properties, which is a common source of a rule that mysteriously has no effect.