Shadcn.io is not affiliated with official shadcn/ui
Gradient Separator
A gradient fade separator using bg-gradient-to-r from transparent via border to transparent for elegant soft-edge divisions
Fades feel sophisticated—gradient separators disappear at edges. This custom div uses h-px w-full bg-gradient-to-r from-transparent via-border to-transparent creating horizontal fade effect. Built with Tailwind gradient utilities, gradient separators provide elegant separation—perfect for premium designs, soft transitions, elegant sections, marketing pages, or any layout where hard edges feel too harsh and fade-out effect adds refinement.
Gradient Separator 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.