Custom Property

In CSS, a way of inventing a property that is meant to be referenced or reused in assignments to existing CSS properties for presentation purposes. Also known as CSS variables.

Examples

button {
    --btn-bg: #00ffdd;
    background-color: var(--btn-bg);
}

In the above example, the custom property --btn-bg is assigned a value of #00ffdd. In the following line, the custom property is used for the background-color property by accessing the value through the var() CSS function. This assigns the #00ffdd color to the background-color of any <button/> element found with this CSS.

Another way to declare custom properties in CSS is by using the @property syntax.

@property --btn-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: #00ffdd;
}

The result of this is nearly the same as the earlier example. However, this syntax provides more control to the property. Allowing a configuration for the type of value expected, the inheritance behavior, and the default value if another appropriate value is not provided.