GradualBlur
`backdrop-filter: blur(...)`
GradualBlur
backdrop-filter: blur(...)
Basic Usage
GradualBlur
Demo loads on client.
Direction (Top / Bottom / Left / Right)
Positions
Demo loads on client.
Preset
Presets
Demo loads on client.
Hover Intensity Boost (hoverIntensity)
HoverIntensity
Demo loads on client.
Trigger on Viewport (animated="scroll")
Animated scroll
Demo loads on client.
Page Target (target="page")
Target page
Demo loads on client.
Responsive Sizes (responsive)
Responsive sizes
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | TextDirection |
strength | number | 2 | Description for strength. |
height | string | '6rem' | Description for height. |
width | string | - | Description for width. |
divCount | number | 5 | Description for divCount. |
exponential | boolean | false | Description for exponential. |
curve | 'linear' | 'bezier' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | Description for curve. |
opacity | number | 1 | Description for opacity. |
animated | boolean | 'scroll' | false | Text/TextTrigger |
duration | string | '0.3s' | Description for duration. |
easing | string | 'ease-out' | Description for easing. |
zIndex | number | 1000 | Description for zIndex. |
target | 'parent' | 'page' | 'parent' | Text：TextContainer/Text |
hoverIntensity | number | - | Description for hoverIntensity. |
responsive | boolean | false | Description for responsive. |
mobileHeight | string | - | Description for mobileHeight. |
tabletHeight | string | - | Description for tabletHeight. |
desktopHeight | string | - | Description for desktopHeight. |
mobileWidth | string | - | Description for mobileWidth. |
tabletWidth | string | - | Description for tabletWidth. |
desktopWidth | string | - | Description for desktopWidth. |
preset | 'top' | 'bottom' | 'left' | 'right' | 'subtle' | 'intense' | 'smooth' | 'sharp' | 'header' | 'footer' | 'sidebar' | 'page-header' | 'page-footer' | - | Description for preset. |
gpuOptimized | boolean | false | Description for gpuOptimized. |
onAnimationComplete | () => void | - | Description for onAnimationComplete. |
className | string | '' | Description for className. |
style | CSSProperties | {} | Description for style. |
Usage Tips
- Container positioning When
target="parent", set parentposition: relativeand useoverflow: hiddento clip edges. - Compatibility Depends on
backdrop-filter; browser support may vary.
Was this helpful?