I want CSS gradients to be directly animatable

I want CSS linear-gradient() and radial-gradient() color stops to be directly animatable with CSS transitions and animations, without requiring workarounds.

Today, animating a gradient requires choosing between a handful of hacky approaches: scaling a huge background-size and animating background-position, layering pseudo-elements with changing opacity, or using JavaScript to interpolate values at runtime. None of these techniques are intuitive, and all add complexity that distracts from the actual design work.

Being able to write something like transition: background-image 0.3s ease and have the gradient color stops smoothly interpolate would be a huge quality-of-life improvement. It would unlock far more expressive, dynamic designs — and bring CSS animation capabilities closer to parity with what is already achievable in native app frameworks.

The @property rule introduced by CSS Houdini offers a partial workaround today by allowing individual custom properties used as gradient stops to be animated, but first-class support in background-image itself remains absent.