ffee
All tools
CSS Variable Generator
Turn one base colour and a scale ratio into a full set of CSS custom properties, with a light and a dark theme.
Generate CSS custom properties
Tokens: —
Base colour: —
Contrast on white: —
How to use the CSS Variable Generator
- Enter a base colour and pick a scale ratio for the type and spacing steps.
- Choose whether you want a light theme, a dark theme or both variants.
- Generate the tokens, then copy the CSS or the JSON view into your project.
Features
- Colour ramp with ten brand shades
- Spacing and font size scale from one ratio
- Radii, shadows and breakpoint tokens
- Light and dark theme blocks together
Advertisement
Frequently Asked Questions
Common questions about the free online css variable generator.
Custom properties, also called CSS variables, are values you define once and then reuse with
the var function in any rule of your stylesheet.
Each shade mixes your base colour with white for the lighter steps and with black for the
darker steps, so the hue stays consistent.
The ratio multiplies each step, so a larger ratio produces wider spacing and bigger jumps
between the font sizes.
Yes. Plain custom properties work in any CSS, and the same names can be mapped into theme
configuration files if you need to.
The dark block overrides the background, surface, text, border and brand ramp so the same
components work on a dark interface.
The prefix keeps your property names unique, so they do not clash with third party styles or
with another design system.
No. The tokens are calculated in your browser with plain JavaScript and the values never
leave your device.
Add a data-theme attribute with the value dark to the html element, or move the block into a
prefers-color-scheme media query.
Yes. Five common breakpoints are written as custom properties, but note that media queries
cannot read custom properties.
Yes. It is completely free, needs no account and keeps working offline once the page has
loaded in your browser.
Last updated: October 10, 2026