Instead of applying a single heavy blur, the component stacks multiple blur layers with increasing intensity and gradient masking. This produces a more natural blur transition — useful for video controls, image overlays, headers, and immersive UI layouts.
What it does:
* Creates progressive blur from any edge (top, bottom, left, right) * Uses layered backdrop-filter + CSS masks for smooth transitions * Fully customizable blur intensity * Works well with Tailwind and modern React apps * Lightweight and dependency-free
*Example use cases:*
* Video player overlays * Scroll fade effects * Glassmorphism UI * Hero sections and media previews
Example usage:
```tsx import BlurEffect from "react-progressive-blur";
<BlurEffect position="top" intensity={80} /> ```
Under the hood, it renders three blur layers with different strengths and masked gradients to simulate a progressive blur instead of a harsh edge.
Would love feedback from the community — especially on performance, API design, or alternative approaches to achieving this effect in modern CSS.
Repo: [https://github.com/rakib86/react-progressive-blur](https://github.com/rakib86/react-progressive-blur)
npm: [https://www.npmjs.com/package/react-progressive-blur](https://www.npmjs.com/package/react-progressive-blur)
0 comments