Story

I built React Progressive Blur, a small React component that creates smooth, multi-layer progressive blur effects for modern UI overlays.

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)