how to add Progressive Blur Effects in React / Next.js with react-progressive-blur
Source: Dev.to
Installation
npm install react-progressive-blur
# or
yarn add react-progressive-blur
# or
bun add react-progressive-blurWhat is react-progressive-blur?
react-progressive-blur is a lightweight React component that lets you add smooth, progressive blur overlays to any element. It’s ideal for video players, image overlays, UI panels, and other situations where a subtle blur can enhance the visual experience.
Basic Usage
import React from "react";
import { BlurEffect } from "react-progressive-blur";
function Example() {
return (
{/* Your content here */}
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
intensity | number | 0 | Blur intensity (0‑100). |
position | string | "center" | Position of the blur overlay ("top", "bottom", "center"). |
className | string | "" | Additional Tailwind or CSS classes for sizing and styling. |
style | object | {} | Inline styles for custom adjustments. |
Styling Tips
Adjust height/width with utility classes:
Use multiple blur layers for richer effects:
How It Works
The component leverages CSS mask-image combined with backdrop-filter to transition smoothly between blur layers. This approach is fully compatible with modern browsers that support these CSS features.
Browser Support
- Chrome 76+
- Edge 79+
- Firefox 70+ (with
backdrop-filterenabled) - Safari 13+
- Opera 63+
Contribute
Contributions are welcome! Feel free to open issues or submit pull requests on the GitHub repository.
Links
- NPM Package:
- GitHub Repo:
Final Thoughts
If you need a hassle‑free, clean solution for progressive blur in a React or Next.js app, give react-progressive-blur a try. It’s minimal, flexible, and designed for modern UIs.