React渐进模糊 – 一个轻量级组件，用于平滑边缘模糊叠加效果
我开发了 React Progressive Blur，这是一个小型的 React 组件，可以为现代用户界面叠加效果创建平滑的多层渐进模糊效果。
<p>该组件不是应用单一的重度模糊，而是叠加多个模糊层，模糊强度逐渐增强，并使用渐变遮罩。这产生了更自然的模糊过渡，非常适合视频控制、图像叠加、标题和沉浸式用户界面布局。</p>
<p>它的功能：</p>
* 从任意边缘（顶部、底部、左侧、右侧）创建渐进模糊
* 使用分层的 backdrop-filter 和 CSS 遮罩实现平滑过渡
* 完全可定制的模糊强度
* 与 Tailwind 和现代 React 应用兼容良好
* 轻量且无依赖
<p>* 示例用例：*</p>
* 视频播放器叠加
* 滚动渐变效果
* 玻璃态用户界面
* 英雄部分和媒体预览
<p>示例用法：</p>
```tsx
import BlurEffect from "react-progressive-blur";
<BlurEffect position="top" intensity={80} />
```
<p>在内部，它渲染了三层具有不同强度和遮罩渐变的模糊层，以模拟渐进模糊，而不是生硬的边缘。</p>
<p>非常希望能得到社区的反馈，特别是在性能、API 设计或在现代 CSS 中实现此效果的替代方法方面。</p>
<p>代码库：
[https://github.com/rakib86/react-progressive-blur](https://github.com/rakib86/react-progressive-blur)</p>
<p>npm：
[https://www.npmjs.com/package/react-progressive-blur](https://www.npmjs.com/package/react-progressive-blur)</p>
查看原文
I built React Progressive Blur, a small React component that creates smooth, multi-layer progressive blur effects for modern UI overlays.<p>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.<p>What it does:<p>* 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<p>*Example use cases:*<p>* Video player overlays
* Scroll fade effects
* Glassmorphism UI
* Hero sections and media previews<p>Example usage:<p>```tsx
import BlurEffect from "react-progressive-blur";<p><BlurEffect position="top" intensity={80} />
```<p>Under the hood, it renders three blur layers with different strengths and masked gradients to simulate a progressive blur instead of a harsh edge.<p>Would love feedback from the community — especially on performance, API design, or alternative approaches to achieving this effect in modern CSS.<p>Repo:
[https://github.com/rakib86/react-progressive-blur](https://github.com/rakib86/react-progressive-blur)<p>npm:
[https://www.npmjs.com/package/react-progressive-blur](https://www.npmjs.com/package/react-progressive-blur)