CSS custom properties (CSS variables) store reusable values in your stylesheet. Define brand colors once, use them everywhere — with runtime theming support.
CSS custom properties (commonly called CSS variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They follow the `--property-name: value` syntax and are accessed via `var(--property-name)`.
CSS variables are the most universal way to encode a design system. Unlike Sass variables, they're live in the browser — you can change them at runtime for dark mode, theme switching, or user preferences. Define `--color-primary: #6366F1` on `:root`, and every element referencing `var(--color-primary)` updates instantly. They work with any framework, any build tool, any CSS approach.
CSS variables are framework-agnostic. Whether you use Tailwind, plain CSS, Vue, React, or vanilla HTML, CSS variables work everywhere. They're also the foundation for dark mode: swap a few variables on `[data-theme='dark']` and the entire UI transforms. They're the lowest-common-denominator of design systems — and that's a feature.
:root {
--color-primary: #6366F1;
--color-accent: #F59E0B;
--font-sans: 'Inter', sans-serif;
--radius-md: 0.5rem;
}
[data-theme='dark'] {
--color-primary: #818CF8;
}
OneMinuteBranding generates your complete brand system — including css variables — in 60 seconds.
Generate your CSS variablesNo account required • 60-second generation • $49 one-time