Typed custom properties in CSS

@property tells the browser what a variable is, and then it can animate it.

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

@property --card-tint {
  syntax: "<color>"; inherits: true; initial-value: #f8fafc;
}

.card {
  background: linear-gradient(var(--card-angle), var(--card-tint), white);
  transition: --card-angle 400ms ease, --card-tint 400ms ease;
}

.card:hover {
  --card-angle: 120deg;
  --card-tint: #dbeafe;
}

How it works

1. syntax names the type; <length> and <color> are the common ones.
2. An untyped variable is a string, and a string cannot be interpolated.
3. inherits and initial-value complete the declaration.

Keywords and builtins used here

• background
• card
• deg
• ms
• property
• transition
• var

The run, in numbers

Lines

19

Characters to type

375

Tokens

85

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 60 seconds.

Type this snippet

Step 3 of 3 in Custom properties, step 7 of 21 in Responsive & modern CSS.

← Previous Next →