SILLYBITS
Dynamic Animated Gradient Background Demo
Installation
Examples
Hero Section Example
SILLYBITS
Dynamic Animated Gradient Background Demo
Usage
import { AnimatedGradientBackground } from "@/components/sillybitsui/animated-gradient-background";<AnimatedGradientBackground />Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#8b5cf6", "#ec4899", "#facc15", "#22c55e", "#ef4444", "#3b82f6"] | List of colors used for the gradient |
direction | string | "90deg" | Direction of the gradient (e.g., "to right", "135deg") |
speed | number | 5 | The speed of the gradient animation |
size | number | 800 | Background gradient size multiplier |
className | string | "" | Additional class names for customization |