how to add Progressive Blur Effects in React / Next.js with react-progressive-blur

Rakibur Rahaman — Sat, 07 Mar 2026 03:05:57 +0000

Installation:

npm install react-progressive-blur

or

yarn add react-progressive-blur

or

bun add react-progressive-blur

When building modern web apps, subtle UI enhancements like smooth blur overlays can make your design feel polished and professional. Whether you're creating video players, image overlays, or elegant UI panels, blur effects can elevate the experience. But adding these effects progressively - with smooth transitions between intensities - can be tricky.
That's why I built react-progressive-blur: a lightweight React component for progressive blur layers, with built-in TypeScript support!
In this post, I'll show you how to install it, set it up in React / Next.js (with TypeScript), and customize it for your app.

🚀 What is react-progressive-blur?
react-progressive-blur lets you add multi-layered blur effects with smooth transitions. It's perfect for:
✅ Modern UI overlays
✅ Video controls
✅ Aesthetic blur gradients
✅ Tailwind CSS compatible layouts
✨ Features:
Progressive blur layers (light → medium → heavy)
Position on any edge (top, bottom, left, right)
Customizable intensity
Tiny size, no extra dependencies
TypeScript types built-in

📝 Basic Usage
Here's a simple example of adding a top blur to an image:
import React from "react"; import BlurEffect from "react-progressive-blur"; export default function MyComponent() { return ( <div className="relative"> <img src="/your-image.jpg" alt="Background" className="w-full/> <BlurEffect position="top" intensity={50} /> </div> ); }

⚙️ Props
Prop Type Default Description className string '' Extra CSS classes intensity number 50 Blur intensity (higher = stronger blur) position `'top' 'bottom' 'left'

💡 Styling Tips
Combine with Tailwind gradients:
<BlurEffect className="bg-gradient-to-b from-black/30 to-transparent" position="top" intensity={75} />

Adjust height/width:
<BlurEffect className="h-40" position="top" intensity={100} /> <BlurEffect className="w-32" position="left" intensity={100} />

Use multiple blurs:
<div className="relative"> <img src="/background.jpg" alt="Background" /> <BlurEffect position="top" intensity={80} className="h-24" /> <BlurEffect position="bottom" intensity={120} className="h-32" /> <BlurEffect position="left" intensity={60} className="w-16" /> </div>

🧠 How it works
react-progressive-blur creates three layers with increasing blur:
Light blur (1× intensity) → 0–25% of the edge
Medium blur (3× intensity) → 25–75%
Heavy blur (6× intensity) → 75–100%

It uses CSS mask-image + backdrop-filter to smoothly transition between layers. Fully compatible with modern browsers.

🌐 Browser Support
✅ backdrop-filter + -webkit-backdrop-filter
✅ mask-image + -webkit-mask-image
👉 Works in all modern browsers. For older browsers, consider polyfills.

🤝 Contribute
Feel free to open issues or submit PRs! Let's make it better together.

📎 Links
NPM Package
GitHub Repo

Final Thoughts
If you want a no-hassle, clean solution for progressive blur in your React or Next.js app, give react-progressive-blur a try. It's minimal, flexible, and designed for modern UIs!

Forem: Rakibur Rahaman

how to add Progressive Blur Effects in React / Next.js with react-progressive-blur

Installation:

or

or