Gradient Glow

A wrapper that paints a soft, animated blurred gradient halo (and optional gradient border) around its children, used to highlight AI features or draw attention to a card or button.

@delego

byappica-dev

import { GradientGlow } from "@/components/ui/gradient-glow";

const PALETTES = [
  { label: "Sunset", from: "#FCA5A5", via: "#FDC49B", to: "#FCE3A6" },
  { label: "Ocean", from: "#9DE7D8", via: "#9CC0F9", to: "#BEB0F7" },
  { label: "Candy", from: "#F0ABFC", via: "#C4B5FD", to: "#93C5FD" },
];

export default function GradientGlowCustomColors() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8">
      {PALETTES.map((p) => (
        <GradientGlow key={p.label} from={p.from} via={p.via} to={p.to}>
          <div className="bg-background text-foreground-intense flex size-28 items-center justify-center rounded-2xl text-sm font-medium">
            {p.label}
          </div>
        </GradientGlow>
      ))}
    </div>
  );
}