Tailwind Gradient Background Animation Generator
Create stunning gradient background animations with Tailwind CSS and customize them easily.
Gradient Animation Generator
Create beautiful gradient animations for your website.
Live gradient preview
Installation
Copy and paste the following code into your project.
"use client";
import React from "react";
import { motion } from "framer-motion";
const GradientAnimationContainer = ({
children,
direction,
speed,
movement,
effect,
color1,
color2,
color3,
color4,
}) => {
const directionClasses = {
"left-to-right": "bg-gradient-to-r",
"right-to-left": "bg-gradient-to-l",
"top-to-bottom": "bg-gradient-to-b",
"bottom-to-top": "bg-gradient-to-t",
};
const speedDurations = {
slow: 10,
medium: 5,
fast: 2,
};
const gradientEffect = {
linear: `from-[${color1}] via-[${color2}] to-[${color3}]`,
radial: `bg-radial from-[${color1}] via-[${color2}] to-[${color3}]`,
conic: `bg-conic from-[${color1}] via-[${color2}] to-[${color3}] via-[${color4}]`,
};
const animationClass = {
static: "",
sliding: "bg-[length:200%_200%] animate-slide",
pulsing: "animate-pulse",
};
return (
<motion.div
className={`w-full h-full flex justify-center rounded-lg items-center ${directionClasses[direction]} ${animationClass[movement]} ${gradientEffect[effect]}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: speedDurations[speed] }}
style={{
backgroundImage: `linear-gradient(to right, ${color1}, ${color2}, ${color3}, ${color4})`,
}}
>
{children}
</motion.div>
);
};
export default GradientAnimationContainer;
Usage
Once you have installed the necessary dependencies and created the components, you can use the GradientAnimationContainer in your project by importing it and adding it to your JSX:
<GradientAnimationContainer
direction="top-to-bottom"
speed="fast"
movement="sliding"
effect="linear"
color1="#ff0000"
color2="#00ff00"
color3="#0000ff"
color4="#ffff00"
>
<p className="text-slate-50 h-[300px] bg-transparent flex justify-center items-center w-full text-center">
Live gradient preview
</p>
</GradientAnimationContainer>