Gradual Blur
Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll.
Use Gradual Blur in your project
Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.
npx shadcn@latest add @react-bits/GradualBlur-TS-TWRelated components
- Animated Content
Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children.
- Fade Content
Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks.
- Cursor Grid
A crisp grid whose cells light up and fade behind the cursor, with grid styles, tiles and click pulses.