Gradual Blur
Customize GradualBlur
Strength2
Div Count5
Opacity1
Props
| Property | Type | Default | Description |
|---|---|---|---|
| position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Position where the blur effect will be applied. |
| strength | number | 2 | Intensity of the blur effect. |
| height | string | '6rem' | Height of the blur area. |
| width | string | - | Width of the blur area. |
| divCount | number | 5 | Number of div layers for the blur effect. |
| exponential | boolean | false | Whether to use exponential blur calculation. |
| zIndex | number | 1000 | CSS z-index for the blur container. |
| animated | boolean | "scroll" | false | Whether the blur effect should be animated. |
| duration | string | '0.3s' | Animation duration. |
| easing | string | 'ease-out' | Animation easing function. |
| opacity | number | 1 | Opacity of the blur effect. |
| curve | 'linear' | 'bezier' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | Curve function for blur progression. |
| responsive | boolean | false | Whether to use responsive dimensions. |
| mobileHeight | string | - | Height for mobile devices. |
| tabletHeight | string | - | Height for tablet devices. |
| desktopHeight | string | - | Height for desktop devices. |
| mobileWidth | string | - | Width for mobile devices. |
| tabletWidth | string | - | Width for tablet devices. |
| desktopWidth | string | - | Width for desktop devices. |
| preset | 'top' | 'bottom' | 'left' | 'right' | 'subtle' | 'intense' | 'smooth' | 'sharp' | 'header' | 'footer' | 'sidebar' | 'page-header' | 'page-footer' | - | Predefined configuration preset. |
| gpuOptimized | boolean | - | Whether to enable GPU optimizations. |
| hoverIntensity | number | - | Blur intensity multiplier on hover. |
| target | 'parent' | 'page' | 'parent' | Target element for positioning. |
| onAnimationComplete | () => void | - | Callback when animation completes. |
| className | string | '' | Additional CSS classes. |
| style | React.CSSProperties | {} | Inline styles for the component. |
Dependencies
mathjs
Created with ❤️ by Cybershoora