Newly available Useful when Registered custom properties adds a clear capability without requiring fragile workarounds.

Registered custom properties

The @property CSS at-rule is used to explicitly define CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

Note: The JavaScript registerProperty() method is equivalent to the @property at-rule.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@property
85
85
128
16.4
85
16.4
DOM API
registerProperty_static

The CSS.registerProperty() static method registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
78
79
128
16.4
78
16.4
CSSPropertyRule

The CSSPropertyRule interface of the CSS Properties and Values API represents a single CSS @property rule.
85
85
128
16.4
85
16.4
inherits

The read-only inherits property of the CSSPropertyRule interface returns the inherit flag of the custom property registration represented by the @property rule, a boolean describing whether or not the property inherits by default.
85
85
128
16.4
85
16.4
initialValue

The read-only initialValue nullable property of the CSSPropertyRule interface returns the initial value of the custom property registration represented by the @property rule, controlling the property's initial value.
85
85
128
16.4
85
16.4
name

The read-only name property of the CSSPropertyRule interface represents the property name, this being the serialization of the name given to the custom property in the @property rule's prelude.
85
85
128
16.4
85
16.4
syntax

The read-only syntax property of the CSSPropertyRule interface returns the literal syntax of the custom property registration represented by the @property rule, controlling how the property's value is parsed at computed-value time.
85
85
128
16.4
85
16.4
CSS at-rule
inherits

The inherits CSS descriptor of the @property at-rule controls whether or not the registered CSS custom property inherits by default. It is a required descriptor; if missing or invalid, the entire @property rule is invalid and ignored.
85
85
128
16.4
85
16.4
initial-value

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 @property/syntax descriptor value is the universal syntax (*). If required but missing or invalid, the entire @property rule is invalid and ignored.
85
85
128
16.4
85
16.4
syntax

The syntax descriptor of the @property at-rule defines the allowed value types for the registered CSS custom property. It controls how the property's specified value is processed to derive the computed value. It is a required descriptor; if missing or invalid, the entire @property rule is invalid and ignored.
85
85
128
16.4
85
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-box {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
  transition: --gradient-angle 0.6s ease;
}

.gradient-box:hover {
  --gradient-angle: 180deg;
}

@property --progress {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.progress-bar {
  --progress: 0%;
  background: linear-gradient(90deg, #16a34a var(--progress), #e5e7eb var(--progress));
  transition: --progress 0.4s ease;
}

Live demo

Gradientangletransition

@property (registered custom properties) Gradientangletransition demo.

PreviewFullscreen

Progress bar

@property (registered custom properties) progressba- demo.

PreviewFullscreen

col-transition

@property (registered custom properties) col-transition demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use Registered custom properties to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links