# Updated: Gradual Blur

By Steven Van · 2026-10-12

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](<https://reactbits.dev/animations/gradual-blur>) has an interactive preview, customization controls and source tabs, which need JavaScript enabled.

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/animations/gradual-blur>)

[Read Updated: Gradual Blur on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-gradual-blur>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-gradual-blur