Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Separator examples · Styled

Gradient Separator for React

A horizontal separator that fades in and out through the border color.

Framework
UI library

Soften the edges of a rule. This React Separator replaces its solid fill with a gradient from transparent, through the border color, back to transparent: bg-transparent clears the fill and bg-linear-to-r from-transparent via-border to-transparent paints the fade. Use it for landing page bands and any break where a hard edge feels too sharp.

Preview

Preview width

Introduction

Details

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use a gradient separator?

On landing or editorial pages where a hard line feels heavy. Keep a solid line in app chrome and forms so the structure stays unambiguous.

Why still use the Separator component?

You keep the same orientation handling, data-slot and accessible role as every other separator. A plain div with a gradient would need those added by hand.

How do I change the gradient colors?

Swap via-border for via-primary or via-foreground/20. Keep both ends transparent so the fade still reads as a line, not a bar.

Should the gradient span the full width?

Full width is the default and matches solid separators. For a shorter accent, constrain it with max-w-md and center it with mx-auto, plus the width override from the Inset Separator example.

Do gradient separators cost extra?

Nothing meaningful: a three-stop CSS gradient is cheaper than an image.

Is a gradient separator announced?

The gradient changes nothing for assistive tech; headings still mark the sections. It's exposed as a separator, like a solid one.

All 20 separator examples