A lightweight React component that creates smooth, progressive blur effects with customizable intensity and positioning. Perfect for creating modern UI overlays, video controls, and aesthetic blur gradients.
- 🎯 Progressive blur layers - Creates smooth transitions with multiple blur intensities
- 📍 Flexible positioning - Apply blur effects to any edge (top, bottom, left, right)
- ⚡ Customizable intensity - Control the blur strength with a simple prop
- 🎨 Tailwind CSS compatible - Seamlessly integrate with your existing styles
- 📱 Cross-browser support - Works with both
backdrop-filterand-webkit-backdrop-filter
npm install react-progressive-blurimport React from "react";
import BlurEffect from "react-progressive-blur";
export default function MyComponent() {
return (
<div className="relative">
{/* Your content */}
<img src="/your-image.jpg" alt="Background" />
{/* Add blur effect */}
<BlurEffect position="top" intensity={50} />
</div>
);
}"use client";
import React from "react";
import BlurEffect from "react-progressive-blur";
export default function VideoPage() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-black">
<div className="max-w-[80rem] mx-auto my-8">
<div className="relative rounded-[4rem] overflow-hidden">
{/* Video with border radius */}
<video
src="/demo.webm"
className="w-full rounded-xl"
controls
autoPlay
muted
loop
/>
{/* Top blur overlay */}
<BlurEffect
className="h-32 bg-gradient-to-b from-black/20 to-transparent"
intensity={100}
position="top"
/>
{/* Bottom blur overlay */}
<BlurEffect
className="h-72 bg-gradient-to-t from-black/20 to-transparent"
intensity={200}
position="bottom"
/>
</div>
</div>
</div>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
className |
string |
'' |
Additional CSS classes to apply to the blur container |
intensity |
number |
50 |
Blur intensity (higher values = more blur) |
position |
'top' | 'bottom' | 'left' | 'right' |
'top' |
Edge where the blur effect should be applied |
The component creates three progressive blur layers with increasing intensity:
- Light blur (1x intensity factor) - Covers 0-25% of the specified edge
- Medium blur (3x intensity factor) - Covers 25-75% of the specified edge
- Heavy blur (6x intensity factor) - Covers 75-100% of the specified edge
Each layer uses CSS mask-image with linear gradients to create smooth transitions between blur levels.
<BlurEffect
className="bg-gradient-to-b from-black/30 to-transparent"
position="top"
intensity={75}
/>{/* For horizontal positions (top/bottom) */}
<BlurEffect
className="h-40"
position="top"
intensity={100}
/>
{/* For vertical positions (left/right) */}
<BlurEffect
className="w-32"
position="left"
intensity={100}
/><div className="relative">
<img src="/background.jpg" alt="Background" />
{/* Top blur */}
<BlurEffect position="top" intensity={80} className="h-24" />
{/* Bottom blur */}
<BlurEffect position="bottom" intensity={120} className="h-32" />
{/* Left side blur */}
<BlurEffect position="left" intensity={60} className="w-16" />
</div>This component uses modern CSS features:
backdrop-filter(with-webkit-backdrop-filterfallback)mask-image(with-webkit-mask-imagefallback)
Supported in all modern browsers. For older browser compatibility, consider adding appropriate polyfills.
MIT © Rakibur Rahaman
Contributions are welcome! Please feel free to submit a Pull Request.