Delta Components

Docs

Progressive Blur

A customizable progressive blur effect component for creating smooth fade transitions at container edges with automatic theme integration.

8 views

0 downloads

A progressive blur component that creates smooth fade and blur effects at the top or bottom of containers. Perfect for creating scroll fade effects, content overlays, and modern UI transitions. Uses multiple blur layers and automatic theme integration.

Demo

Code

Open in

Scroll down to see the effect

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat cumque laudantium libero reprehenderit perferendis quo nulla voluptate? Repellat tenetur labore exercitationem dicta libero voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic iste libero dignissimos ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam at debitis delectus odit quia animi ex mollitia vero molestias itaque deleniti, quos exercitationem consequatur assumenda dolor? Quod reiciendis in similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere aliquam voluptatum alias? Officia expedita ut vel? Beatae deserunt sequi id eos libero suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est laborum quam sint eius sequi. Eum, veniam dignissimos.

Overview

The ProgressiveBlur component applies a progressive blur effect using backdrop filtering combined with CSS gradients and masking. It automatically uses your theme's background color for seamless integration with light and dark modes. The blur effect can be toggled with the blurEnabled prop.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/progressive-blur.json

Usage

Basic Usage

1import ProgressiveBlur from "@/registry/components/progressive-blur"
2
3export function Component() {
4  return (
5    <div className="relative h-96 bg-background overflow-hidden">
6      <ProgressiveBlur position="top" height="150px" blurAmount="4px" />
7      {/* Your content here */}
8    </div>
9  )
10}

Disabled Blur (Mask Only)

1import ProgressiveBlur from "@/registry/components/progressive-blur"
2
3export function Component() {
4  return (
5    <div className="relative h-96 bg-background overflow-hidden">
6      <ProgressiveBlur position="top" height="150px" blurEnabled={false} />
7      {/* Your content here */}
8    </div>
9  )
10}

API Reference

Name	Type	Default	Description
`className`	`string`	`""`	Additional CSS classes to apply to the blur overlay
`backgroundColor`	`string`	`"hsl(var(--background))"`	Background color for the gradient. Defaults to theme background
`position`	`"top" \| "bottom"`	`"top"`	Whether to apply the blur effect at the top or bottom
`height`	`string`	`"150px"`	Height of the blur effect area
`blurAmount`	`string`	`"4px"`	Intensity of the backdrop blur effect
`blurEnabled`	`boolean`	`true`	Whether to apply the blur effect. When false, shows only the mask effect

Theme Integration

The component automatically uses your shadcn theme's background color via hsl(var(--background)). This ensures:

Automatic theme switching: Works seamlessly with light and dark modes
Consistent design: Matches your theme's color palette perfectly
Custom backgrounds: Override with any CSS color value when needed

Examples

1// Basic blur effect (recommended)
2<ProgressiveBlur position="top" height="150px" />
3
4// Custom height and blur amount
5<ProgressiveBlur position="bottom" height="200px" blurAmount="8px" />
6
7// Mask-only effect (no blur)
8<ProgressiveBlur position="top" blurEnabled={false} />
9
10// Custom background color
11<ProgressiveBlur position="top" backgroundColor="hsl(var(--card))" />
12
13// Multiple positions
14<>
15  <ProgressiveBlur position="top" />
16  <ProgressiveBlur position="bottom" />
17</>