Custom properties
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.
Initial valuesee proseApplies toall elementsInheritedyesComputed valueas specified with variables substitutedAnimation typediscrete
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 49 | 15 | 31 | 9.1 | 49 | 9.3 | |
| Other | ||||||
| The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property. | 49 | 15 | 31 | 9.1 | 49 | 9.3 |
Syntax
:root {
--color-primary: #2563eb;
--color-bg: #ffffff;
--spacing-md: 1rem;
}
.card {
background: var(--color-bg);
padding: var(--spacing-md);
border: 1px solid var(--color-primary);
}
/* Dark theme */
[data-theme="dark"] {
--color-primary: #60a5fa;
--color-bg: #1e293b;
}
/* Fallback values */
.text {
color: var(--color-text, #333);
}Live demo
Cssvariable in themedefinition
CSS Custom Properties (CSS Variables) CSSvariable in themedefinition demo.
Use cases
-
Using Custom properties
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.