A tailwind utility for nice eased gradient mattes

tw-gradient-matte.css

/**
 * A background gradient from translucent black to transparent, with easing
 *
 * Usage: `<div class="bg-gradient-to-b gradient-matte-30"></div>`
 * @see https://larsenwork.com/easing-gradients/#editor
 */
@utility gradient-matte-* {
  --_strength: calc(--value(integer) / 100);

  --tw-gradient-stops:
    var(--tw-gradient-position), rgb(0 0 0 / var(--_strength)) 0%,
    rgb(0 0 0 / calc(var(--_strength) * 0.987)) 8.1%,
    rgb(0 0 0 / calc(var(--_strength) * 0.951)) 15.5%,
    rgb(0 0 0 / calc(var(--_strength) * 0.896)) 22.5%,
    rgb(0 0 0 / calc(var(--_strength) * 0.825)) 29%,
    rgb(0 0 0 / calc(var(--_strength) * 0.741)) 35.3%,
    rgb(0 0 0 / calc(var(--_strength) * 0.648)) 41.2%,
    rgb(0 0 0 / calc(var(--_strength) * 0.55)) 47.1%,
    rgb(0 0 0 / calc(var(--_strength) * 0.45)) 52.9%,
    rgb(0 0 0 / calc(var(--_strength) * 0.352)) 58.8%,
    rgb(0 0 0 / calc(var(--_strength) * 0.259)) 64.7%,
    rgb(0 0 0 / calc(var(--_strength) * 0.175)) 71%,
    rgb(0 0 0 / calc(var(--_strength) * 0.104)) 77.5%,
    rgb(0 0 0 / calc(var(--_strength) * 0.049)) 84.5%,
    rgb(0 0 0 / calc(var(--_strength) * 0.013)) 91.9%, rgb(0 0 0 / 0) 100%;
}