āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/background-gradient-animation ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A smooth and elegant background gradient animation that changes the gradient position over time.
card, background, gradient, special, call to action
Run the following command:
npx shadcn@latest add @aceternity/background-gradient-animation
| Prop | Type | Description | Default Value | | :--- | :--- | :--- | :--- | | gradientBackgroundStart | string | "rgb(108, 0, 162)" | The starting color of the background gradient, specified as an RGB value. | | gradientBackgroundEnd | string | "rgb(0, 17, 82)" | The ending color of the background gradient, specified as an RGB value. | | firstColor | string | "18, 113, 255" | The first color used in the animation, specified as an RGB value without the rgb tag. | | secondColor | string | "221, 74, 255" | The second color used in the animation, specified as an RGB value without the rgb tag. | | thirdColor | string | "100, 220, 255" | The third color used in the animation, specified as an RGB value without the rgb tag. | | fourthColor | string | "200, 50, 50" | The fourth color used in the animation, specified as an RGB value without the rgb tag. | | fifthColor | string | "180, 180, 50" | The fifth color used in the animation, specified as an RGB value without the rgb tag. | | pointerColor | string | "140, 100, 255" | The color of the pointer, specified as an RGB value without the rgb tag. | | size | string | "80%" | The size of the animated elements. | | blendingValue | string | "hard-light" | The blending mode used for the animated elements. | | children | React.ReactNode | undefined | Children components to be rendered inside the component. | | className | string | undefined | Additional CSS class for styling. | | interactive | boolean | true | Determines if the animation is interactive or not. | | containerClassName | string | undefined | Additional CSS class for the container. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā