GenerateRandomSearch

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.

How to use this tool

Press generate for a CSS variable name.

Common use cases

Design-system documentation examples
Teaching CSS variable naming conventions
Placeholder code examples

CSS Class Name GeneratorGenerate an example CSS class name in a common BEM-ish convention, like card__title.
Hex Color GeneratorA colour shown as its hex code, with a live swatch preview.