CSS Custom Properties Generator
Add name/value pairs and get a ready-to-paste :root block of CSS variables.
Advertisement
About this tool
Variable names are prefixed with -- automatically if you don't type it — reference any of them elsewhere in your CSS with var(--name).
Names are tidied as you type: spaces become hyphens, characters that aren’t allowed are removed and everything is made lower case, so “Brand Colour” becomes --brand-colour. Custom property names are case-sensitive, so keeping them consistently lower case avoids hard-to-spot bugs. Values are copied exactly as you type them, minus any stray semicolon.