← All components
Surfaces / effect
Gradual Blur
Progressive blur along an edge, with layered masks that keep the transition soft.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Place the overlay inside a position:relative container. It decorates existing content and does not provide content of its own.
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
React 19CSSCSS backdrop-filter and mask-image
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | top|bottom|left|right | bottom | Edge |
strength | number | 2 | Blur strength |
height | CSS dimension | 6rem | Edge depth |
width | CSS dimension | 100% | Optional width override. |
divCount | number | 5 | Blur layers |
exponential | boolean | false | Exponential blur |
opacity | number | 1 | Opacity |
curve | linear|bezier|ease-in|ease-out|ease-in-out | linear | Curve |
target | parent|page | parent | Position relative to the parent or fixed to the page. |
zIndex | number | 10 | Stacking order of the decorative overlay. |
className | string | | Additional classes for the outer element. |
style | CSSProperties | undefined | Additional outer styles. |