React Progressive Blur

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.

$3

!Basic Example
!Basic Example

Features

- 🎯 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-filter and -webkit-backdrop-filter

Installation

``bash
npm install react-progressive-blur
`

Usage


`tsx
import React from "react";
import BlurEffect from "react-progressive-blur";

export default function MyComponent() {
return (



{/ Your content /}


{/ Add blur effect /}



`tsx
"use client";
import React from "react";
import BlurEffect from "react-progressive-blur";

export default function VideoPage() {
return (


| 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 |

How It Works

The component creates three progressive blur layers with increasing intensity:

1. Light blur (1x intensity factor) - Covers 0-25% of the specified edge
2. Medium blur (3x intensity factor) - Covers 25-75% of the specified edge
3. 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.

Styling Tips

$3

`tsx
className="bg-gradient-to-b from-black/30 to-transparent"
position="top"
intensity={75}
/>
`

$3

`tsx
{/ For horizontal positions (top/bottom) /}
className="h-40"
position="top"
intensity={100}
/>

{/ For vertical positions (left/right) /}
className="w-32"
position="left"
intensity={100}
/>
`

$3

`tsx





{/ Top blur /}


{/ Bottom blur /}


{/ Left side blur /}



This component uses modern CSS features:
- backdrop-filter (with -webkit-backdrop-filter fallback)
- mask-image (with -webkit-mask-image` fallback)

Supported in all modern browsers. For older browser compatibility, consider adding appropriate polyfills.

License

MIT © Rakibur Rahaman

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.