Feature request: better linear gradients with custom easing

[gustavopch]

The problem is thoroughly described here (https://larsenwork.com/easing-gradients/) and here (https://css-tricks.com/easing-linear-gradients/), but you'll understand just looking at this:

Maybe add classes such as bg-ease-to-t, bg-ease-in-out-sine-to-b, etc.

Here's my current workaround (I use it like bg-linear-to-t from-black smooth; it's incompatible with via-*):

@utility smooth {
  --point-1-x: 0;
  --point-1-y: 100%;
  --point-2-x: 0.083;
  --point-2-y: 98.8%;
  --point-3-x: 0.167;
  --point-3-y: 94.9%;
  --point-4-x: 0.25;
  --point-4-y: 88%;
  --point-5-x: 0.333;
  --point-5-y: 77.9%;
  --point-6-x: 0.417;
  --point-6-y: 64.8%;
  --point-7-x: 0.5;
  --point-7-y: 50%;
  --point-8-x: 0.583;
  --point-8-y: 35.2%;
  --point-9-x: 0.667;
  --point-9-y: 22.1%;
  --point-10-x: 0.75;
  --point-10-y: 12%;
  --point-11-x: 0.833;
  --point-11-y: 5.1%;
  --point-12-x: 0.917;
  --point-12-y: 1.2%;
  --point-13-x: 1;
  --point-13-y: 0%;
  --tw-gradient-stops: 
    var(--tw-gradient-position),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-1-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-1-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-2-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-2-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-3-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-3-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-4-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-4-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-5-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-5-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-6-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-6-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-7-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-7-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-8-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-8-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-9-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-9-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-10-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-10-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-11-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-11-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-12-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-12-x)),
    color-mix(in oklab, var(--tw-gradient-from) var(--point-13-y), var(--tw-gradient-to)) calc(var(--tw-gradient-from-position, 0%) + (var(--tw-gradient-to-position, 100%) - var(--tw-gradient-from-position, 0%)) * var(--point-13-x)) !important;
}

Here's a script to generate the points:

import BezierEasing from 'bezier-easing'

const CURVE_PARAMS = [0.45, 0, 0.55, 1] as const
const RESOLUTION = 13

const easing = BezierEasing(...CURVE_PARAMS)

for (let i = 0; i < RESOLUTION; i++) {
  const x = i / (RESOLUTION - 1)
  const y = easing(x)
  console.log(`--point-${i + 1}-x: ${Number(x.toFixed(3))};`)
  console.log(`--point-${i + 1}-y: ${Number(((1 - y) * 100).toFixed(1))}%;`)
}

Other relevant links:

• [css-images] Add easing functions to color stops w3c/csswg-drafts#1332
• https://easings.net
• https://npm.im/postcss-easing-gradients

Extra keywords for discoverability: scrim gradient, smooth gradient, gradient easing.