Search for a command to run...
A 12-layer backdrop-blur ramp with a theme-aware surface fade for scroll edges.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "top" | "bottom" | "top" | Edge where the blur and surface fade are strongest. |
variant | "masked" | "cumulative" | "masked" | Rendering model. Use cumulative only for mask-hostile transformed surfaces. |
surfaceFade | "primary" | "secondary" | "none" | "primary" | Selects or omits the semantic surface-color fade. |
surfaceFadeTail | CSS length | 0 | Leaves a transparent region after the surface-color fade. |
blurExtent | CSS length string | "100%" | Sizes the blur independently from the surface fade. |
className | string | — | Positions and sizes the non-interactive overlay. |
The visual model is fixed at the accepted product defaults: 12 linearly spaced blur layers from 6px to 0px, a 6px sampling gutter, and a 17-stop smoothstep surface fade. The fade reads the selected semantic surface token, so it follows light mode, dark mode, and locally themed surfaces.
Place it after the scrolling content in DOM order so it paints above content without requiring a new z-index layer.
Use variant="cumulative" inside transformed mobile drawers where the browser drops masks from
backdrop-filter layers.
Use surfaceFade="none" when existing chrome intentionally allows the page color to show
through beneath the blur.
surfaceFade to the semantic surface behind the scrolling content.Add a separate gradient or backdrop-blur class. Select the component variants instead.