Animate the Unanimatable

#@propertyproperty

Declare custom property types so CSS can interpolate gradients, colors, and angles. Without it, gradients snap. With it, they flow.

Why it works: Aesthetic-Usability Effect — smooth, polished transitions read as higher quality and more usable.

live_demo

code

@property --color {
  syntax: '<;color>;';
  inherits: false;
  initial-value: #34d399;
}

.box {
  background: linear-gradient(135deg, var(--color), var(--b));
  transition: --color 0.8s;
}