Shadcn.io is not affiliated with official shadcn/ui
Gradient Button
Button with a flowing gradient background that shifts colors on hover for React.
Colors in motion. This button's gradient background smoothly rotates through your color palette—like oil on water or a mood ring coming to life. Hover and the shift accelerates, creating this mesmerizing flow that's impossible to ignore. It's bold, it's modern, and it makes flat solid buttons look boring. Perfect for creative brands, music apps, or any CTA that should feel dynamic and alive. The gradient never stops, but it's subtle enough to not distract—just enough motion to catch peripheral vision.
Gradient Button preview
Installation
Related Components
Shimmer Button
Flowing shimmer effect
Glow Border Button
Rotating gradient glow
Shine Button
Diagonal light sweep
Liquid Button
Fluid fill animation
Spotlight Button
Cursor-following light
Pulse Button
Pulsing attention ring