Pricing

Progressive Blur

The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.

4,717

Bookmarks

14,917

Installs

25,517

Views

24 lines
"use client"

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

export default function ProgressiveBlurDemo() {
  return (
    <div className="relative w-full rounded-xl border">

16 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Dependencies
None — plain React + Tailwind
License
MIT License
Published
1/6/2025

Similar components

That's all 6 components

Explore more

Part of Magic UI — browse the full library on Nuxus.