Gradient Animation Background

Flowing gradients that dance like aurora in a digital sky. Build mesmerizing React backgrounds with animated orbs, mouse tracking, TypeScript support, and CSS blend modes for Next.js applications with shadcn/ui.

React

CSS Animations

Trying to implement gradient animations?

Join our Discord community for help from other developers.

Static gradients are everywhere. CSS linear-gradient this, radial-gradient that. Boring. What if your gradients could move, breathe, respond to your cursor? This React component creates five animated orbs that float around your background, blending colors like paint drops in water, with an extra orb that follows your mouse.

Dynamic flowing gradients

Watch orbs dance with independent movement and mouse interaction:

Loading component...

"use client";import { cn } from "@/lib/utils";import { useEffect, useRef, useState } from "react";export const BackgroundGradientAnimation = ({  gradientBackgroundStart = "rgb(108, 0, 162)",  gradientBackgroundEnd = "rgb(0, 17, 82)",  firstColor = "18, 113, 255",  secondColor = "221, 74, 255",  thirdColor = "100, 220, 255",  fourthColor = "200, 50, 50",  fifthColor = "180, 180, 50",  pointerColor = "140, 100, 255",  size = "80%",  blendingValue = "hard-light",  children,  className,  interactive = true,  containerClassName,}: {  gradientBackgroundStart?: string;  gradientBackgroundEnd?: string;  firstColor?: string;  secondColor?: string;  thirdColor?: string;  fourthColor?: string;  fifthColor?: string;  pointerColor?: string;  size?: string;  blendingValue?: string;  children?: React.ReactNode;  className?: string;  interactive?: boolean;  containerClassName?: string;}) => {  const interactiveRef = useRef<HTMLDivElement>(null);  const [curX, setCurX] = useState(0);  const [curY, setCurY] = useState(0);  const [tgX, setTgX] = useState(0);  const [tgY, setTgY] = useState(0);  useEffect(() => {    document.body.style.setProperty(      "--gradient-background-start",      gradientBackgroundStart    );    document.body.style.setProperty(      "--gradient-background-end",      gradientBackgroundEnd    );    document.body.style.setProperty("--first-color", firstColor);    document.body.style.setProperty("--second-color", secondColor);    document.body.style.setProperty("--third-color", thirdColor);    document.body.style.setProperty("--fourth-color", fourthColor);    document.body.style.setProperty("--fifth-color", fifthColor);    document.body.style.setProperty("--pointer-color", pointerColor);    document.body.style.setProperty("--size", size);    document.body.style.setProperty("--blending-value", blendingValue);  }, []);  useEffect(() => {    function move() {      if (!interactiveRef.current) {        return;      }      setCurX(curX + (tgX - curX) / 20);      setCurY(curY + (tgY - curY) / 20);      interactiveRef.current.style.transform = `translate(${Math.round(        curX      )}px, ${Math.round(curY)}px)`;    }    move();  }, [tgX, tgY]);  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {    if (interactiveRef.current) {      const rect = interactiveRef.current.getBoundingClientRect();      setTgX(event.clientX - rect.left);      setTgY(event.clientY - rect.top);    }  };  const [isSafari, setIsSafari] = useState(false);  useEffect(() => {    setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));  }, []);  return (    <div      className={cn(        "h-screen w-screen relative overflow-hidden top-0 left-0 bg-[linear-gradient(40deg,var(--gradient-background-start),var(--gradient-background-end))]",        containerClassName      )}    >      <svg className="hidden">        <defs>          <filter id="blurMe">            <feGaussianBlur              in="SourceGraphic"              stdDeviation="10"              result="blur"            />            <feColorMatrix              in="blur"              mode="matrix"              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"              result="goo"            />            <feBlend in="SourceGraphic" in2="goo" />          </filter>        </defs>      </svg>      <div className={cn("", className)}>{children}</div>      <div        className={cn(          "gradients-container h-full w-full blur-lg",          isSafari ? "blur-2xl" : "[filter:url(#blurMe)_blur(40px)]"        )}      >        <div          className={cn(            `absolute [background:radial-gradient(circle_at_center,_var(--first-color)_0,_var(--first-color)_50%)_no-repeat]`,            `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,            `[transform-origin:center_center]`,            `animate-first`,            `opacity-100`          )}        ></div>        <div          className={cn(            `absolute [background:radial-gradient(circle_at_center,_rgba(var(--second-color),_0.8)_0,_rgba(var(--second-color),_0)_50%)_no-repeat]`,            `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,            `[transform-origin:calc(50%-400px)]`,            `animate-second`,            `opacity-100`          )}        ></div>        <div          className={cn(            `absolute [background:radial-gradient(circle_at_center,_rgba(var(--third-color),_0.8)_0,_rgba(var(--third-color),_0)_50%)_no-repeat]`,            `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,            `[transform-origin:calc(50%+400px)]`,            `animate-third`,            `opacity-100`          )}        ></div>        <div          className={cn(            `absolute [background:radial-gradient(circle_at_center,_rgba(var(--fourth-color),_0.8)_0,_rgba(var(--fourth-color),_0)_50%)_no-repeat]`,            `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,            `[transform-origin:calc(50%-200px)]`,            `animate-fourth`,            `opacity-70`          )}        ></div>        <div          className={cn(            `absolute [background:radial-gradient(circle_at_center,_rgba(var(--fifth-color),_0.8)_0,_rgba(var(--fifth-color),_0)_50%)_no-repeat]`,            `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,            `[transform-origin:calc(50%-800px)_calc(50%+800px)]`,            `animate-fifth`,            `opacity-100`          )}        ></div>        {interactive && (          <div            ref={interactiveRef}            onMouseMove={handleMouseMove}            className={cn(              `absolute [background:radial-gradient(circle_at_center,_rgba(var(--pointer-color),_0.8)_0,_rgba(var(--pointer-color),_0)_50%)_no-repeat]`,              `[mix-blend-mode:var(--blending-value)] w-full h-full -top-1/2 -left-1/2`,              `opacity-70`            )}          ></div>        )}      </div>    </div>  );};

Built for React applications with TypeScript and Next.js. The orbs use CSS animations with different timing cycles (20-40 seconds), creating organic movement that never repeats exactly. Blend modes make colors interact naturally, and mouse tracking adds that interactive spark.

Installation

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

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

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

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

Usage

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

export default function Hero() {
  return (
    <BackgroundGradientAnimation
      gradientBackgroundStart="rgb(108, 0, 162)"
      gradientBackgroundEnd="rgb(0, 17, 82)"
      firstColor="18, 113, 255"
      secondColor="221, 74, 255"
      thirdColor="100, 220, 255"
      fourthColor="200, 50, 50"
      fifthColor="180, 180, 50"
      pointerColor="140, 100, 255"
      blendingValue="hard-light"
      interactive={true}
    >
      <div className="absolute z-50 inset-0 flex items-center justify-center text-white font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl">
        <p className="bg-clip-text text-transparent drop-shadow-2xl bg-gradient-to-b from-white/80 to-white/20">
          Gradients in Motion
        </p>
      </div>
    </BackgroundGradientAnimation>
  );
}

Why most gradient animations look cheap

Most developers use keyframe animations to shift background-position or hue-rotate. It looks artificial—too smooth, too predictable. Some try JavaScript to animate gradient stops, but that's performance hell. Real organic movement has layers, depth, and unpredictable interactions.

This React component creates depth with five independent orbs, each following different animation paths. CSS blend modes (hard-light, screen, overlay) make colors interact like real light mixing. The mouse-following orb adds interactivity without being distracting. No canvas, no complex calculations—just smart CSS and React working together.

Features

Five independent animated orbs with 20-40 second movement cycles
Interactive mouse tracking with smooth cursor-following orb
CSS blend modes creating natural color mixing (hard-light, screen, overlay, multiply, color-dodge)
Customizable color system supporting full RGB control for all elements
Safari optimizations with SVG filter fallbacks for cross-browser support
TypeScript definitions for all props and color configurations
Performance optimized using pure CSS animations
shadcn/ui compatible with proper content layering

API Reference

BackgroundGradientAnimation

Main container component for the gradient animation effect.

Prop	Type	Default	Description
`gradientBackgroundStart`	`string`	`"rgb(108, 0, 162)"`	Starting color of background gradient
`gradientBackgroundEnd`	`string`	`"rgb(0, 17, 82)"`	Ending color of background gradient
`firstColor`	`string`	`"18, 113, 255"`	RGB values for first orb (no rgb() wrapper)
`secondColor`	`string`	`"221, 74, 255"`	RGB values for second orb (no rgb() wrapper)
`thirdColor`	`string`	`"100, 220, 255"`	RGB values for third orb (no rgb() wrapper)
`fourthColor`	`string`	`"200, 50, 50"`	RGB values for fourth orb (no rgb() wrapper)
`fifthColor`	`string`	`"180, 180, 50"`	RGB values for fifth orb (no rgb() wrapper)
`pointerColor`	`string`	`"140, 100, 255"`	RGB values for mouse-tracking orb
`size`	`string`	`"80%"`	Size of the animated orbs
`blendingValue`	`string`	`"hard-light"`	CSS mix-blend-mode for color mixing
`interactive`	`boolean`	`true`	Enable mouse tracking for pointer orb
`children`	`ReactNode`	-	Content to display over the animation
`className`	`string`	-	Additional CSS classes for content wrapper
`containerClassName`	`string`	-	Additional CSS classes for main container

Color Format

// Orb colors: RGB values without rgb() wrapper
firstColor = "255, 0, 128"; // Pink
secondColor = "0, 255, 128"; // Green

// Background colors: Full CSS color values
gradientBackgroundStart = "rgb(45, 212, 191)";
gradientBackgroundEnd = "hsl(240, 100%, 20%)";

Available Blend Modes

hard-light (default) - Strong color mixing
screen - Bright, luminous effect
overlay - Balanced color blending
multiply - Darker color mixing
color-dodge - Intense bright highlights

Common gotchas

Color format confusion: Orb colors need RGB values without the rgb() wrapper ("255, 0, 128"), but background gradients use full CSS color syntax ("rgb(255, 0, 128)").

Z-index layering: Your content needs absolute z-50 or higher to appear above the animation. The orbs use lower z-index values for proper layering.

Performance with many props: Each color change triggers a re-render. For dynamic color changing, consider using CSS variables instead of props.

Blend mode browser support: Most blend modes work everywhere, but color-dodge might not work in very old browsers. hard-light is the safest default.

Mouse tracking on mobile: Touch devices don't have hover, so the interactive orb won't track touches. The other orbs still animate normally.

Explore other flowing background components for React applications:

Dynamic flowing gradients

Installation

Usage

Why most gradient animations look cheap

Features

API Reference

BackgroundGradientAnimation

Color Format

Available Blend Modes

Common gotchas

You might also like

Aurora

Vortex

Waves

Bubble Background

Ethereal Shadow

Noise

Questions developers actually ask

On this page

Gradient Animation Background

Reactbackground-gradient-animation

Aurora

Vortex

Waves

Bubble Background

Ethereal Shadow

Noise

How do I create a custom color scheme?

What blend mode should I use?

Can I disable the mouse tracking?

How do I change the animation speed?

Can I add more orbs or remove some?

How do I make a static gradient version?

On this page