Easing curves

Each curve spreads the change differently across the gradient. Pick by where the fade should be quiet.

ease-in-out-sine Quiet at both ends and quickest in the middle. The default, and the right one for most fades.
ease-in Stays light for longest and darkens near the end. Good for a scrim that should leave most of the image alone.
ease-out Darkens early and settles. Good when the solid end should reach further into the gradient.
linear One straight ramp with two stops. Its start and end show as lines on a large surface.

Your own curve

Pass a cubic bezier as four numbers, the same values CSS takes in cubic-bezier(). The x values stay between 0 and 1. A y value outside that range is clamped, so the gradient never overshoots its colors.

import { easingGradient, easingStops } from "@reuse-sh/gradients";

const fade = easingGradient({
  from: "var(--surface)",
  to: "transparent",
  easing: [0.23, 1, 0.32, 1],
  stops: 16,
});

// Or take the samples and write the gradient yourself.
const stops = easingStops("ease-out", 8);

import { easingGradient } from "@reuse-sh/gradients";

const fade = easingGradient({
  from: "var(--surface)",
  to: "transparent",
  easing: [0.23, 1, 0.32, 1],
});

export function Fade() {
  return <div className="fade" style={{ backgroundImage: fade }} />;
}