Gradient Background

Creates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.

768 B

•

Updated on August 21, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-backgrounds-gradient

pnpm dlx shadcn@latest add @spaceui/components-backgrounds-gradient

Code

<GradientBackground />

Prop	Type	Required	Default	Description
transition	Transition		{ duration: 15, ease: 'easeInOut', repeat: Infinity }	The transition of the gradient
...props	React.ComponentProps<"div">		-	The props of the GradientBackground.

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

On This Page

pnpm dlx shadcn@latest add @spaceui/components-backgrounds-gradient