initial-value

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The initial-value descriptor of the @property at-rule specifies the initial value for the registered CSS custom property. It is a required descriptor unless the syntax descriptor value is the universal syntax (*). If required but missing or invalid, the entire @property rule is invalid and ignored.

Syntax

/* Set initial color value */
initial-value: rebeccapurple;

/* Set initial length value */
initial-value: 2rem;

Values

A value that matches the type specified in the syntax descriptor. For example, if syntax is <color>, then the initial-value must be a valid color value.

Formal definition

Related at-rule	`@property`
Initial value	`n/a (required)`
Computed value	as specified

Formal syntax

initial-value = 
  <declaration-value>?

Examples

Setting an initial value for a custom property

This example shows how to define a custom property --my-color with an initial color value of #c0ffee. This initial value will be used when the property is not inherited (inherits: false) and no other value is set on the element.

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript CSS.registerProperty():

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Specifications

Specification
CSS Properties and Values API Level 1 # initial-value-descriptor

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`initial-value`	85	85	128	71	16.4	85	128	60	16.4	14.0	85