Getting started

Install the package, build a gradient string, and set it wherever CSS takes a gradient.

Install

npm install @reuse-sh/gradients

Build a gradient

easingGradient returns a CSS string. Set it as a background or a mask, in a style attribute, CSS-in-JS or a server template. There is nothing to destroy.

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

// A scrim that eases from nothing to 72% black, for text over an image.
scrim.style.backgroundImage = easingGradient({
  to: "rgb(0 0 0 / 0.72)",
  direction: "to bottom",
});

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

const scrim = easingGradient({ to: "rgb(0 0 0 / 0.72)", direction: "to bottom" });

export function Caption({ children }) {
  return <figcaption style={{ backgroundImage: scrim }}>{children}</figcaption>;
}

Fade a scrolling edge

createFadeEdge masks the sides of a horizontal scroller with the same eased stops. Destroy it with the scroller, and it puts the old inline style back.

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

const strip = document.querySelector(".prints");
const fade = createFadeEdge(strip, { size: 64, curve: "smooth", mode: "scroll" });

// Change it later, or remove it with the strip.
fade.update({ mode: "fixed" });
fade.destroy();

import { createFadeEdge } from "@reuse-sh/gradients";
import { useEffect, useRef } from "react";

export function Prints({ prints, mode = "scroll" }) {
  const ref = useRef(null);
  useEffect(() => {
    const fade = createFadeEdge(ref.current, { size: 64, mode });
    return () => fade.destroy();
  }, [mode]);
  return <div ref={ref} className="prints">{prints.map(renderPrint)}</div>;
}

Hand this page to your coding agent.

Read https://reuse.sh/easing-gradients/guide.md, install @reuse-sh/gradients and add Easing gradients to <where>. Keep the principles the guide lists.