Background Gradient
An animated gradient that sits at the background of a card, button or anything.
Installation
Run the following command
npx shadcn@latest add @aceternity/background-gradient
Props
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | undefined | The content to be rendered within the gradient background. |
className | string | undefined | The CSS class to be applied to the inner div. |
containerClassName | string | undefined | The CSS class to be applied to the outermost div. |
animate | boolean | true | Determines whether the gradient background should animate. If false, the gradient background will be static. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

