ProgressiveBlur
progressive-blurApplies a directional multi-step blur gradient at a content edge.
Usage
Bottom gradually blurred
Absolutely covers the content, the closer to the bottom, the blurrier it becomes. It is often used to fade out/mask the copy area of the content.
<div className="relative overflow-hidden rounded-[var(--radius)] border border-border">
{/* content */}
<ProgressiveBlur side="bottom" />
</div>Top progressive blur
side Switches the blur enhancement direction. The top is the most blurry, which is suitable for the top bar adsorption scene.
<ProgressiveBlur side="top" />Horizontal · The right side is blurred
left / right does horizontal progressive blur, often used for edge hints in horizontal sliding lists.
<ProgressiveBlur side="right" />Stronger layering
layers increases the number of layers to make the transition smoother, and blur increases the basic blur amount.
<ProgressiveBlur side="bottom" layers={8} blur={2} />When to Use
Use it to feather one edge of an image wall, long list, or horizontal scroller with a progressive blur overlay. For animated borders, use BorderBeam or ShineBorder; for pointer glare, use GlareHover; for magnification, use Lens.
Import
import { ProgressiveBlur } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | The direction of blur enhancement, this side is the most blurry. |
| layers | number | 5 | Number of layers; more layers produce a smoother transition |
| blur | number | 1 | Base blur in pixels, doubled for each successive layer |
| className | string | — | Passthrough to the root overlay. |
Usage Guidelines
- The parent container must be
position: relativeandoverflow-hidden, and the overlay must be absolutely positioned to cover this side, otherwise the blur layer will overflow or be positioned incorrectly. - Depends on
backdrop-filter, it needs to be applied on the same layer with actual content to see the effect (there is nothing blurry on the empty background).
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative overflow-hidden">
{/* content */}
<ProgressiveBlur side="bottom" />
</div>