Custom properties
Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.
Overview
Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.
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
Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features