CSS @property

What Is @property?

@property lets you register a CSS custom property (variable) and define its type, inheritance behavior, and initial value.

Why this matters: normally, CSS variables are treated like untyped text, which makes animating them unreliable. With @property, certain variables can animate smoothly (for example a number or angle).

Basic Syntax

A registered property includes:

• syntax – what type of value is allowed
• inherits – whether it inherits from parent
• initial-value – default value

@property --spin {
  syntax: "";
  inherits: false;
  initial-value: 0deg;
}

After registration, you can use the variable like any other custom property:

.loader {
  transform: rotate(var(--spin));
}

Animating a Registered Variable

Here is a clean example: animating an angle variable.

@property --spin {
  syntax: "";
  inherits: false;
  initial-value: 0deg;
}

@keyframes spinVar {
  to { --spin: 360deg; }
}

.loader {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  animation: spinVar 1s linear infinite;
  transform: rotate(var(--spin));
}

Without @property, animating --spin might not interpolate as an angle, and can behave inconsistently.

Common Syntax Types

Some useful syntax values:

• "<number>" – numbers (e.g., 0.5, 2)
• "<length>" – lengths (e.g., 12px, 1rem)
• "<percentage>" – percentages (e.g., 50%)
• "<angle>" – angles (e.g., 45deg)
• "<color>" – colors (support varies; use with care)

Example: number variable for opacity-like scaling:

@property --t {
  syntax: "";
  inherits: true;
  initial-value: 1;
}

.card {
  transform: scale(var(--t));
}

Inheritance Control

If inherits is set to true, child elements will inherit the variable value from the parent. If false, each element starts from the initial-value unless you set it.

@property --gap {
  syntax: "";
  inherits: true;
  initial-value: 12px;
}

.list {
  --gap: 18px;
}

.list > li {
  margin-bottom: var(--gap);
}

Browser Support Note

@property is a modern feature. In projects that need maximum compatibility, use it as an enhancement: the UI should still work without it, but animations may be less smooth.

Summary

• @property registers CSS variables with a type (syntax), inheritance, and a default value.
• Registered variables can animate smoothly (especially numbers/angles/lengths).
• Use @property to build more reliable variable-based animations and design systems.