Background Gradient

An animated background gradient component with colorful radial gradients and smooth hover effects. Perfect for React applications requiring product showcases with Next.js integration and TypeScript support.

Framer Motion

Loading component...

"use client";import { cn } from "@/lib/utils";import React from "react";import { motion } from "framer-motion";export const BackgroundGradient = ({  children,  className,  containerClassName,  animate = true,}: {  children?: React.ReactNode;  className?: string;  containerClassName?: string;  animate?: boolean;}) => {  const variants = {    initial: {      backgroundPosition: "0 50%",    },    animate: {      backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],    },  };  return (    <div className={cn("relative p-[4px] group", containerClassName)}>      <motion.div        variants={animate ? variants : undefined}        initial={animate ? "initial" : undefined}        animate={animate ? "animate" : undefined}        transition={          animate            ? {                duration: 5,                repeat: Infinity,                repeatType: "reverse",              }            : undefined        }        style={{          backgroundSize: animate ? "400% 400%" : undefined,        }}        className={cn(          "absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl  transition duration-500 will-change-transform",          " bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"        )}      />      <motion.div        variants={animate ? variants : undefined}        initial={animate ? "initial" : undefined}        animate={animate ? "animate" : undefined}        transition={          animate            ? {                duration: 5,                repeat: Infinity,                repeatType: "reverse",              }            : undefined        }        style={{          backgroundSize: animate ? "400% 400%" : undefined,        }}        className={cn(          "absolute inset-0 rounded-3xl z-[1] will-change-transform",          "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"        )}      />      <div className={cn("relative z-10", className)}>{children}</div>    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-gradient.json

npx shadcn@latest add https://www.shadcn.io/registry/background-gradient.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-gradient.json

bunx shadcn@latest add https://www.shadcn.io/registry/background-gradient.json

Features

Animated gradient backgrounds with four vibrant radial gradients using Framer Motion
Hover interactions with opacity transitions and blur effects for enhanced user engagement
Customizable animation with optional enable/disable toggle and configurable timing
Responsive design with flexible container and content sizing
TypeScript support with complete interface definitions and prop validation
shadcn/ui integration using Tailwind CSS utilities and design tokens
Performance optimized with hardware-accelerated CSS transforms and will-change properties

Use Cases

This free open source React component works well for:

Product showcases - E-commerce product cards with animated backgrounds
Feature highlights - Landing page sections built with Next.js and TypeScript
Call-to-action cards - Marketing content with engaging visual effects using Tailwind CSS
Portfolio items - Creative showcases with gradient overlays
Premium content - Subscription tiers and pricing cards with visual appeal

API Reference

BackgroundGradient

Prop	Type	Default	Description
`children`	`ReactNode`	`undefined`	Content to display inside the gradient container
`className`	`string`	`undefined`	Additional CSS classes for the inner content container
`containerClassName`	`string`	`undefined`	Additional CSS classes for the outer gradient container
`animate`	`boolean`	`true`	Whether to enable gradient animation and movement

Implementation Notes

Component uses Framer Motion for smooth gradient position animations with 5-second cycles
Gradient colors include teal (#00ccb1), purple (#7b61ff), yellow (#ffc414), and blue (#1ca0fb)
Two gradient layers provide depth: one with blur effect and one sharp for definition
Hover state increases opacity from 60% to 100% for interactive feedback
Animation can be disabled for static gradient backgrounds when needed
Uses CSS will-change property for optimized rendering performance