linear-gradient-element

Set linear-gradient CSS background of your element, with transition animation, interpolation

linear-gradient-element.mov

Install

$ npm install linear-gradient-element

Usage

Simple usage in React:

import { LinearGradientElement, LinearGradient, RGB } from "linear-gradient-element";

const from = new LinearGradient({
  angle: 270,
  colorStops: [
    [new RGB([0, 219, 222], 1), 0],
    [new RGB([252, 0, 255], 1), 1],
  ],
});

const to = new LinearGradient({
  angle: 43,
  colorStops: [
    [new RGB([65, 88, 208], 1), 0],
    [new RGB([200, 80, 192], 1), 0.46],
    [new RGB([255, 204, 112], 1), 1],
  ],
});

Transition

function Transition() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const target = ref.current;
    if (!target) {
      return;
    }

    const element = new LinearGradientElement(target, from);
    element.transition(to, { duration: 2000 });
  }, []);

  return <div style={{ width: 500, height: 300, background: from.css() }} ref={ref} />;
}

Screen.Recording.2025-01-11.at.11.56.27.PM.mov

Transition With Easing

function easeInOutQuart(x: number): number {
  return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
}

function TransitionWithEasing() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const target = ref.current;
    if (!target) {
      return;
    }

    const element = new LinearGradientElement(target, from);
    element.transition(to, { duration: 2000, easing: easeInOutQuart });
  }, []);

  return <div style={{ width: 500, height: 300, background: from.css() }} ref={ref} />;
}

Screen.Recording.2025-01-11.at.11.59.34.PM.mov

Interpolation

function Interpolation() {
  const ref = useRef<HTMLDivElement>(null);
  const [element, setElement] = useState<LinearGradientElement | null>(null);

  useEffect(() => {
    const target = ref.current;
    if (!target) {
      return;
    }

    setElement(new LinearGradientElement(target, from));
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <div style={{ display: "flex", gap: 8 }}>
        <button onClick={() => element?.interpolation(from, to, 0)}>0%</button>
        <button onClick={() => element?.interpolation(from, to, 0.25)}>25%</button>
        <button onClick={() => element?.interpolation(from, to, 0.5)}>50%</button>
        <button onClick={() => element?.interpolation(from, to, 0.75)}>75%</button>
        <button onClick={() => element?.interpolation(from, to, 1)}>100%</button>
      </div>
      <div style={{ width: 500, height: 300, background: from.css() }} ref={ref} />
    </div>
  );
}

Screen.Recording.2025-01-12.at.12.09.51.AM.mov