Rainbow Gradient

MAX

A beautiful animated rainbow gradient background effect.

Demo

Rainbow Gradient
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$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:

PropertyTypeDefaultDescription
speednumber3Animation speed in seconds
colorsstring[]["#ff0080", "#ff8c00", "#40e0d0", "#9370db", "#00ff00"]Array of colors for the gradient
blurnumber4Blur intensity in rem
opacitynumber0.2Opacity of the effect (0-1)
widthstring"60%"Width of the effect as a percentage
heightstring"80%"Height of the effect as a percentage
positionstring"bottom"Vertical position of the effect
backgroundSizestring"200%"Background size for the animation
classNamestring""Additional CSS classes
styleReact.CSSProperties{}Additional inline styles
easing"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out""linear"Easing type for the animation
childrenReactNode-(Optional) Content to render above the gradient