Rainbow Gradient
MAX
A beautiful animated rainbow gradient background effect.
Demo
Rainbow Gradient
Exclusive Launch 50% offspots left: 0 / 50
$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Usage Example
Custom Rainbow
Properties
The RainbowGradient component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
speed | number | 3 | Animation speed in seconds |
colors | string[] | ["#ff0080", "#ff8c00", "#40e0d0", "#9370db", "#00ff00"] | Array of colors for the gradient |
blur | number | 4 | Blur intensity in rem |
opacity | number | 0.2 | Opacity of the effect (0-1) |
width | string | "60%" | Width of the effect as a percentage |
height | string | "80%" | Height of the effect as a percentage |
position | string | "bottom" | Vertical position of the effect |
backgroundSize | string | "200%" | Background size for the animation |
className | string | "" | Additional CSS classes |
style | React.CSSProperties | {} | Additional inline styles |
easing | "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | Easing type for the animation |
children | ReactNode | - | (Optional) Content to render above the gradient |
