Skip to main content
A progressive blur overlay that creates smooth fade-out effects at the edges of scrollable content.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-auto">
      <div className="space-y-4 p-4">
        {/* Your scrollable content */}
      </div>
      
      <ProgressiveBlur height="50%" position="bottom" />
    </div>
  )
}

    ​
    Both Sides

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

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-auto">
      <div className="space-y-4 p-4">
        {/* Your scrollable content */}
      </div>
      
      <ProgressiveBlur position="both" />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    classNamestring-Additional CSS classes to apply to the blur container
    heightstring"30%"Height of the blur effect container
    position"top" | "bottom" | "both""bottom"Position where the blur effect should appear
    blurLevelsnumber[][0.5, 1, 2, 4, 8, 16, 32, 64]Array of blur values in pixels for progressive effect
    childrenReact.ReactNode-Optional content to render within the blur container
    The component uses CSS backdrop-filter to create the blur effect, which provides smooth progressive blurring at the edges.
    Use position="both" for content that scrolls in both directions, or position="top" for bottom-to-top scrolling.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us