CSS Variable Name Generator
Generates a random, sensibly-structured CSS custom-property (variable) name, e.g. --brand-accent-color — 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
- --surface-border-muted
Common use cases
- Design-system documentation examples
- Teaching CSS variable naming conventions
- Placeholder code examples
How this generator works
A custom-property name is assembled in the double-hyphen form CSS requires, joining lower-case words with single hyphens and following the common category-role-variant order — --colour-text-muted rather than --mutedTextColour. The order is the useful part: names that sort alphabetically also group by what they are, so a stylesheet's variables read as a structure rather than a list.
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.
- 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.