Build a complete CSS custom properties (variables) stylesheet. Define colours, spacing, fonts and more — copy the :root block instantly.
Enter a variable name (e.g. --primary-color) and its value. Click Add Variable to add as many as needed.
Use the group field to organise variables into sections like Colors, Spacing and Typography for a clean stylesheet.
Click Copy CSS to copy the complete :root { } declaration block ready to paste into your stylesheet.
CSS custom properties, defined with the -- prefix inside a :root or element selector, store reusable values. They are referenced with var(--name). Changing the variable once updates every place it is used.
CSS variables make your stylesheet consistent and easy to maintain. To change your primary brand colour across an entire site, you update one line in :root rather than searching for every hex value in your CSS files.
:root matches the top-level element of the document (the <html> element) but has higher specificity than html {}. Defining custom properties here makes them globally available to every element in the page.
Yes. var(--primary-color, #0a6aff) provides #0a6aff as a fallback if --primary-color is not defined or is invalid. Fallbacks can be any valid CSS value, including another var() call.
Yes. Use document.documentElement.style.setProperty('--primary-color', '#ff0000') to change a :root variable at runtime. This is very efficient for theming, dark mode and dynamic UI changes.
Yes. CSS custom properties are fully supported in all modern browsers including Chrome, Firefox, Safari and Edge. They are not supported in Internet Explorer 11 and below.
Yes. For example: width: calc(var(--spacing-unit) * 4) is valid. This is a powerful pattern for building spacing scales and responsive sizing systems.
Yes. Define variables inside a class selector rather than :root to scope them to that component. This is the foundation of CSS component theming and design token systems.
Sass and LESS variables are compiled at build time and replaced with static values in the output CSS. CSS variables exist in the live browser and can be updated dynamically with JavaScript or CSS media queries.
CSS variables cannot be used directly inside @media query conditions (e.g. @media (max-width: var(--breakpoint)) does not work). However, you can change variable values inside media query blocks to affect element styles.
