CSS Variable Generator
Generate CSS custom properties with scope selector, dark/light theme pair, SCSS/Less/JSON design-token exports. Free, offline, client-side, instant.
Generate CSS custom properties with scope selector, light/dark theme pair (with auto prefers-color-scheme rule), and exports as CSS / SCSS / Less / JSON design tokens. Covers the ways variables are actually used: plain :root, themed scopes, and class overrides.
Output
Usage example
How to Use CSS Variable Generator
- Pick a mode: single set (one scope) or light+dark theme pair (auto-wraps dark in
@media (prefers-color-scheme: dark)). - Pick a scope selector -
:root(global),[data-theme="dark"](theme-attribute switching), or custom. - Enter key: value pairs, one per line. Names are auto-prefixed with
--and kebab-cased. - Switch format tabs for CSS / SCSS / Less / JSON design tokens (Style Dictionary format).
- Click Load sample tokens to see a typical design-system palette (colors, sizes, fonts, durations).
- Watch the usage example output - shows how to reference each variable based on its detected type.
- Copy or download the output in your chosen format.
Frequently Asked Questions
What’s a theme-pair output?
Two sets of variables (light + dark) combined into one CSS file. The light variables go to :root (default), the dark ones are wrapped in @media (prefers-color-scheme: dark). Browser auto-switches based on the user’s OS theme – no JavaScript needed. The most popular dark-mode pattern in 2026.
Why use [data-theme=”dark”] instead of media query?
Two approaches: media query auto-follows OS theme (passive). data-attribute lets users override via a toggle button (e.g. light/dark switcher in your nav). Most sites combine both – start with media query, override with attribute when user clicks toggle. Pick the data-theme scope here for the toggle approach.
What’s a JSON design token?
A standardized format for representing design values (colors, sizes, fonts) outside any specific framework. Tools like Style Dictionary and Figma Tokens read this JSON and emit CSS, iOS Swift, Android XML, etc. from one source. Output here uses the simple {name: {value, type}} shape Style Dictionary expects.
SCSS variables vs CSS custom properties?
SCSS: compile-time. $primary is REPLACED with its value before browser sees it. Can’t change at runtime. Faster (no var() lookups). CSS custom properties: runtime. --primary is resolved by the browser; JavaScript can change it on the fly; supports cascading and inheritance. Use SCSS for build-time tokens; CSS vars for runtime theming.
How do I reference these in JavaScript?
getComputedStyle(document.documentElement).getPropertyValue('--primary') reads the resolved value. document.documentElement.style.setProperty('--primary', '#new-color') overrides it at runtime – the page updates instantly. Many JS theming libraries (e.g. Mode-watcher in Svelte) work exactly this way.
Can I use calc() with CSS variables?
Yes – that’s a major advantage over SCSS. padding: calc(var(--space) * 2); works at RUNTIME (SCSS calc only works at compile-time). Lets you build dynamic spacing scales. Heads-up: math operations need explicit units (calc(var(--space) * 2) only works if –space already has units).
What’s the naming convention?
Kebab-case lowercase: --primary-color, --text-lg, --shadow-md. Some teams use a 2-segment prefix for organization: --color-primary, --size-md, --shadow-card. The tool auto-converts inputs to kebab-case but preserves your prefix structure.
Are CSS variables widely supported?
Universal as of 2026 – Chrome 49+ (2016), Firefox 31+ (2014), Safari 9.1+ (2016). IE11 doesn’t support them, but IE11 reached end-of-life in 2022 and Microsoft removed it from Windows 11. Even legacy sites can usually drop IE11 by 2026.
Is my data secure?
Yes. Variable names, values – all stay in your browser. Nothing is uploaded.