React Background Gradient

Powered by

Framer Motion

React

CSS Transforms

Product cards with static backgrounds look cheap. Like "free template" cheap. Your gorgeous product photos deserve better than a boring white rectangle. This React component wraps your content in animated radial gradients that move like living light, making every card feel premium.

Premium gradient showcase

Watch gradients flow behind your content with smooth hover interactions:

import React from "react";import { BackgroundGradient } from "@/components/ui/shadcn-io/background-gradient";import { IconAppWindow } from "@tabler/icons-react";export default function BackgroundGradientDemo() {  return (    <div className="flex items-center justify-center min-h-[400px]">      <BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900">        <img          src="/image-1.webp"          alt="product showcase"          height="400"          width="400"          className="object-contain rounded-lg"        />        <p className="text-base sm:text-xl text-black mt-4 mb-2 dark:text-neutral-200">          shadcn/ui Components        </p>        <p className="text-sm text-neutral-600 dark:text-neutral-400">          Beautiful, reusable components built on Radix UI and Tailwind CSS. Copy and paste into your apps. Customizable. Open Source.        </p>      </BackgroundGradient>    </div>  );}

"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>  );};

Built for React applications with TypeScript and Next.js. Four radial gradients (teal, purple, yellow, blue) animate in 5-second cycles using Framer Motion. Hover increases opacity from 60% to 100%, creating that satisfying "premium feel" interaction users expect from high-end interfaces.

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

Usage

import { BackgroundGradient } from "@/components/ui/background-gradient";

export default function ProductCard() {
  return (
    <BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900">
      <img
        src="/product.webp"
        alt="premium product"
        className="object-contain rounded-lg"
      />
      <h3 className="text-base sm:text-xl text-black mt-4 mb-2 dark:text-neutral-200">
        Premium Product Name
      </h3>
      <p className="text-sm text-neutral-600 dark:text-neutral-400">
        Beautiful description that sells the value, not just features.
      </p>
    </BackgroundGradient>
  );
}

Why most gradient backgrounds look amateur

Most developers slap a CSS linear-gradient behind content and call it done. It's static, predictable, boring. Some try animating gradient stops with JavaScript, but that's janky and performance-heavy. Others use pre-built gradient libraries that look like everyone else's site.

This React component creates depth with four independent radial gradients that move on different timing cycles. Framer Motion handles the animation smoothly without JavaScript animation frame juggling. Blur and opacity layers create visual depth. The hover interaction feels intentional, not accidental—like premium interfaces should.

Features

• Four animated radial gradients with 5-second independent movement cycles
• Smooth hover interactions with opacity transitions (60% to 100%)
• Framer Motion animations for hardware-accelerated performance
• Layered visual depth using blur effects and opacity stacking
• Responsive container sizing adapting to content dimensions
• TypeScript definitions for all animation and styling props
• Animation toggle for static gradient when needed
• shadcn/ui compatible with proper dark mode support

API Reference

BackgroundGradient

Main container component for animated radial gradient backgrounds.

Gradient Colors

The component uses four carefully selected radial gradients:

// Predefined gradient colors (not customizable via props)
teal: "#00ccb1"     // Vibrant cyan-green
purple: "#7b61ff"   // Electric purple  
yellow: "#ffc414"   // Warm golden yellow
blue: "#1ca0fb"     // Bright sky blue

Common gotchas

Content contrast issues: Light content can get lost against the bright gradients. Always test your text colors and consider adding semi-transparent backgrounds for readability.

Animation performance: The gradients use transform animations that are GPU-accelerated. If you see performance issues, disable animation with animate={false} and use the static gradient version.

Container sizing: The gradient adapts to container size. Very small containers (under 200px) might not show the full gradient effect properly.

Dark mode considerations: The component works in dark mode but the gradients stay the same colors. Consider wrapping in conditional rendering if you need different gradients for light/dark themes.

Z-index layering: Content appears above gradients automatically, but if you have complex layouts with positioned elements, you might need to adjust z-index values.

You might also like

Explore other premium background components for React applications:

Questions developers actually ask