Shadcn.io is not affiliated with official shadcn/ui
Gradient Separator
A gradient React separator that keeps the shadcn/ui Separator primitive and fades the fill from transparent through the border token
Soften the edges of a rule. This React Separator keeps the Radix primitive and swaps the solid fill for a horizontal gradient through --border. Built with shadcn/ui. Perfect for marketing bands and any break where a hard edge feels too sharp.
Gradient Separator preview
Scroll to load preview
Installation
Related Components
Horizontal Separator
Solid line separator
Thick Separator
Bold 4px separator
Dashed Separator
Dashed line pattern
Dotted Separator
Dotted line pattern
Card
Card with borders
Section Divider
Section boundaries
FAQ
Was this page helpful?
Sign in to leave feedback.