Easing gradients

Principles

• Ease the stops. The gradient samples an easing curve into a dozen stops instead of one straight ramp, so a fade has no hard edge where it starts or ends.

• Mix in oklab. Each stop is a color-mix() in oklab, so a fade to transparent keeps its hue instead of passing through gray.

• Take any CSS color. The colors are written into the gradient as CSS, so names, oklch() and var() values all work and the browser resolves them.

• Grow the fade with the scroll. In scroll mode each edge of a scroller fades in by the distance left to scroll, so the start stays sharp until you move, and the mask follows right-to-left layouts.

• Refuse broken input. An unknown easing, a bezier outside 0 to 1 or fewer than two stops throws a RangeError instead of writing a gradient the browser drops.

• Restore what it touched. The fade edge's destroy disconnects its observers and puts the scroller's original style attribute back exactly.