Radial Gradient Background

Heroes

About

A full-bleed radial gradient background that emanates from the center using theme palette tokens, ideal as a slide or hero backdrop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Gradient Background to your project and fits it to your theme.

Code

How Radial Gradient Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { RadialGradient } from "@/components/ui/gradient-radial";

export default function Default() {
  return (
    <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl border border-border shadow-sm">
      <RadialGradient />
      <div className="relative z-10 flex h-full w-full flex-col items-center justify-center px-8 text-center">
        <h2 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
          Radial Gradient
        </h2>
        <p className="mt-4 max-w-md text-base text-muted-foreground sm:text-lg">
          A full-bleed background emanating from the center
        </p>
      </div>
    </div>
  );
}