Edge Fade Blur React component
A scroll area whose content melts away at the edges: a stack of backdrop blurs ramps up smoothly toward the top and bottom while the content fades out, and each edge only appears when there's more to scroll that way.
About the Edge Fade Blur component
Edge Fade Blur gives a scroll area soft edges. Instead of content being chopped off at the top and bottom, it gets progressively blurrier and fainter the closer it gets to the edge, like looking through frosted glass that thickens toward the frame.
The blur is built from several layers that each double the one before, so it ramps smoothly with no visible line. Each edge only shows when there's more to scroll that way, which quietly tells people there's more.
When to use it
Use it for changelogs, chat histories, feeds, long lists in side panels, lyrics or transcripts, and any fixed-height scroller on a polished page.
It works best over varied content like images and text; on a flat background the fade alone does most of the work.
Installation
Add the Edge Fade Blur component to your project with the shadcn CLI. It lands in components/edge-fade-blur.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/edge-fade-blurOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<EdgeFadeBlur /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| edges Which edges blur. | "both" | "top" | "bottom" | "both" |
| size Height of the blurred band at each edge, in px. | number | 96 |
| maxBlur Blur at the very edge, in px; it halves with each step inward. | number | 12 |
| steps Number of blur steps; more steps make a smoother ramp. | number | 6 |
| fade Also fade the content out toward each edge. | boolean | true |
| height Height of the scroll area. | number | string | 420 |
| contentClassName Classes for the inner scroll area. | string | — |
- edges
Which edges blur.
"both" | "top" | "bottom"Default: "both" - size
Height of the blurred band at each edge, in px.
numberDefault: 96 - maxBlur
Blur at the very edge, in px; it halves with each step inward.
numberDefault: 12 - steps
Number of blur steps; more steps make a smoother ramp.
numberDefault: 6 - fade
Also fade the content out toward each edge.
booleanDefault: true - height
Height of the scroll area.
number | stringDefault: 420 - contentClassName
Classes for the inner scroll area.
string
npm dependencies
Installed for you by the shadcn CLI.
Edge Fade Blur FAQ
- How strong is the blur?
- maxBlur is the blur at the very edge in pixels; it halves at each of the steps inward. size sets how tall the blurred band is.
- Can I blur only one edge?
- Yes, edges="top" or "bottom"; the default blurs both.
- Does the content also fade?
- By default it does, with a mask on the scroll area. Set fade={false} to keep only the blur.
- Does it work in every browser?
- It uses backdrop-filter, which all current browsers support. Where it isn't available, you still get the fade.
