Question 1

What are CSS custom properties?

Accepted Answer

CSS custom properties (also called CSS variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are declared with a double-dash prefix (like --main-color) and accessed using the var() function (var(--main-color)).

Question 2

How are CSS variables different from preprocessor variables?

Accepted Answer

Unlike Sass or Less variables, CSS custom properties are live and can be updated at runtime with JavaScript. They follow normal CSS inheritance and cascade rules, and can be redefined in media queries or by other selectors to support theming.

Question 3

Can I export the variables as a JSON or design token file?

Accepted Answer

Yes. The generator can output the variables as a ready-to-paste :root CSS block, a JSON token file, or a SCSS map. Click the Copy button to grab whichever format you need.

Question 4

Do CSS variables work in all browsers?

Accepted Answer

CSS custom properties are supported in all modern browsers — Chrome, Firefox, Safari, Edge — and have been stable since 2017. They do not work in Internet Explorer 11.

Variables

Live Preview

Sample card with your variables

Generated CSS