Custom properties: reusable, cascading values

Custom properties are entities defined by CSS authors that represent specific values reused throughout a document. Declare one with a two-dash prefix such as --main-bg-color inside a ruleset, or with the @property at-rule, which additionally associates a type with the property, sets an initial value, and controls inheritance. Custom properties are subject to the cascade and inherit their value from their parent; the ruleset's selector defines the scope where the property can be referenced, so a common practice is declaring them on the :root pseudo-class for global reach, and names are case sensitive. Read a custom property with the var() function in place of a standard property value; var() works only for property values, not property names or selectors, so it cannot be used inside media queries or container queries. They reduce repetition of values such as colors across stylesheets and add semantic naming, and a corresponding API exists for defining them in JavaScript. Scope: CSS custom properties. Reviewed October 4, 2026.