Gradient Animation

Smoothly transitioning gradient background

gradientbackgroundcolor

Useto navigate between components

Preview

Code

TypeScript + React

'use client'

import { motion } from 'framer-motion'

export function GradientAnimation() {
  return (
    <motion.div
      className="h-48 w-64 rounded-2xl"
      animate={{
        background: [
          'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
          'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
          'linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)',
          'linear-gradient(45deg, #43e97b 0%, #38f9d7 100%)',
          'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
        ],
      }}
      transition={{
        duration: 10,
        repeat: Infinity,
        ease: 'linear',
      }}
    />
  )
}

How to Use

1Install Framer Motion: npm install framer-motion
2Copy the code from above
3Paste it into your project and customize as needed
4Colors are customizable via Tailwind CSS classes. The default theme uses dark mode colors defined in your globals.css file