<var>
Lets you insert the value of a custom property (CSS Variable) into your stylesheet, making it easier to reuse colors, spacing, and other values across your design.
Quick example
:root {
--primary: #3366ff;
}
.button {
/* Uses the variable defined above */
background-color: var(--primary);
/* Optional: providing a fallback color in case the variable is missing */
color: var(--text-color, white);
}<var> Browser Support
Widely available Since 2017 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
49+
31+
9.1+
15+