Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Gradient Separator
A gradient fade separator using bg-gradient-to-r from transparent via border to transparent for elegant soft-edge divisions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Above
Below
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Dotted Separator
A dotted horizontal separator using border-dotted with bg-transparent for decorative or lightweight visual divisions
React Separator - Double Line
Two parallel horizontal separators with space-y-1 gap for elegant, formal, or traditional visual divisions with sophisticated appearance