Updated: Gradual Blur
By Steven Van ·
The edge blur loses its visible steps and gains a color fade, hover to clear and scroll-aware hiding, in JavaScript or TypeScript with CSS or Tailwind.
React Bits has updated its Gradual Blur component, a progressive edge blur for headers, footers, captions and carousels. The blur now has no visible steps, so the transition from sharp to blurred reads as smooth.
What was added
- A fade to any color, so the blurred edge can blend into the surrounding background.
- A color boost option.
- Hover to clear, which removes the blur when the pointer is over it.
- A blur that hides itself at the ends of a scroll.
Installing it
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/GradualBlur-TS-TW. The Gradual Blur page has an interactive preview, customization controls and source tabs, which need JavaScript enabled.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →