NoiseGradient

Background

A slowly morphing four-point mesh gradient — the lightweight, mobile-safe alternative to a WebGL shader background. Pure CSS.

Requires the .prism-meshgrad styles from globals.css.

$npx shadcn@latest add https://prism.icglabs.co/r/noise-gradient.json

View raw manifest →

components/prism/NoiseGradient.tsx

/**
 * NoiseGradient — a slowly morphing four-point mesh gradient, pure CSS (no WebGL).
 * The lightweight, mobile-safe alternative to ShaderField for hero/section
 * backgrounds. Add film grain by wrapping in a `.grain` element. Pass any palette.
 *
 * Render it absolutely-positioned behind content (it fills its positioned parent).
 */
export function NoiseGradient({
  className = "",
  colors = ["#8b5cff", "#1fd4e6", "#ff3d81", "#ffb24d"],
}: {
  className?: string;
  colors?: [string, string, string, string];
}) {
  return (
    <div
      aria-hidden
      className={`prism-meshgrad ${className}`}
      style={
        {
          "--mg-1": colors[0],
          "--mg-2": colors[1],
          "--mg-3": colors[2],
          "--mg-4": colors[3],
        } as React.CSSProperties
      }
    />
  );
}