index.md

---

title: initial-value
slug: Web/CSS/@property/initial-value
page-type: css-at-rule-descriptor
status:
  - experimental
browser-compat: css.at-rules.property.initial-value

---

{{CSSRef}}{{SeeCompatTable}}

The initial-value CSS descriptor is required when using the {{cssxref("@property")}} at-rule unless the syntax accepts any valid token stream. It sets the initial-value for the property.

The value chosen as the initial-value must parse correctly according to the syntax definition. Therefore, if syntax is <color> then the initial-value must be a valid {{cssxref("color")}} value.

Syntax

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

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

Values

A string with a value which is a correct value for the chosen syntax.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Add type checking to --my-color {{cssxref('--*', 'custom property')}}, as a color, the initial-value being a valid color:

Using CSS {{cssxref('@property')}} at-rule:

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

Using JavaScript {{domxref('CSS.registerProperty')}}:

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• CSS Properties and Values API

• CSS Painting API

• CSS Typed Object Model

• CSS Houdini