backgrounds

Purple Radial Background

A deep purple radial gradient that fades from black at the center to electric purple at the edges.

Preview

Purple Radial

Black center, electric purple edges.

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

Source files

components/ui/purple-radial-bg.tsx

import { cn } from "@/lib/utils";

/**
 * A deep purple radial gradient background.
 * The gradient fades from black at the center to electric purple at the edges.
 */
export function PurpleRadialBg({
  children,
  className,
  innerClassName,
}: {
  children?: React.ReactNode;
  className?: string;
  innerClassName?: string;
}) {
  return (
    <div
      className={cn(
        "relative h-full w-full min-h-[320px] overflow-hidden",
        className,
      )}
    >
      <div
        className={cn(
          "absolute inset-0 -z-10 h-full w-full items-center px-5 py-24",
          innerClassName,
        )}
        style={{
          background: "radial-gradient(125% 125% at 50% 10%, #000 40%, #63e 100%)",
        }}
      />
      {children}
    </div>
  );
}

export default PurpleRadialBg;