Progressive Blur

A layered blur component that progressively blurs content using gradient masks and backdrop-filter. Inspired by Motion Primitives’ Progressive Blur . Great for fading content edges on images and hero sections.

Installation

npx shadcn@latest add https://prismaui.com/components/progressive-blur.json

Import


import { ProgressiveBlur } from '@/components/ui/progressive-blur';

Preview

Place the component over an image or content area with absolute positioning.


<div className='relative h-64 w-full overflow-hidden rounded-lg'>
  <Image
    src='https://picsum.photos/800/256'
    alt='Demo'
    width={800}
    height={256}
    className='h-full w-full object-cover'
  />
  <ProgressiveBlur className='absolute inset-0' />
</div>

Direction

Change the blur direction with the direction prop.

Top

Bottom

Left

Right


<ProgressiveBlur direction='top' />
<ProgressiveBlur direction='bottom' />
<ProgressiveBlur direction='left' />
<ProgressiveBlur direction='right' />

Custom Intensity


<ProgressiveBlur blurIntensity={0.5} blurLayers={12} />

With Infinite Slider

Apply ProgressiveBlur over an InfiniteSlider to fade the edges of a scrolling strip — a common pattern for marquee sections.


<div className='relative w-full overflow-hidden'>
  <InfiniteSlider gap={16} speed={60}>
    <Image
      src='https://picsum.photos/160/96'
      alt='1'
      width={160}
      height={96}
      className='h-24 aspect-video rounded-lg object-cover'
    />
    <Image
      src='https://picsum.photos/162/98'
      alt='2'
      width={162}
      height={98}
      className='h-24 aspect-video rounded-lg object-cover'
    />
    <Image
      src='https://picsum.photos/164/96'
      alt='3'
      width={164}
      height={96}
      className='h-24 aspect-video rounded-lg object-cover'
    />
  </InfiniteSlider>
  {/* Fade left edge */}
  <ProgressiveBlur
    direction='left'
    className='absolute inset-y-0 left-0 w-24'
    blurIntensity={0.4}
  />
  {/* Fade right edge */}
  <ProgressiveBlur
    direction='right'
    className='absolute inset-y-0 right-0 w-24'
    blurIntensity={0.4}
  />
</div>

Props

Prop	Type	Default	Description
`direction`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Blur fade direction.
`blurLayers`	`number`	`8`	Number of blur layers.
`blurIntensity`	`number`	`0.25`	Blur intensity multiplier.
`className`	`string`	—	Additional CSS classes.