# Updated: Grainient

By Steven Van · 2026-10-12

The rebuilt React background adds stripes, rings, poster edges and a satin sheen, and it now needs no extra dependencies.

[React Bits](<https://creatorstoolbox.com/resources/react-bits>) has [rebuilt its Grainient background](<https://reactbits.dev/backgrounds/grainient>), the flowing grainy gradient component, with richer colors, flowing waves and no extra dependencies.

## Interaction

The gradient responds to the cursor. Users can drag the colors around or click to swirl them.

## Visual options

The rebuilt component supports stripes, rings, crisp poster edges and a satin sheen.

## Install

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/Grainient-TS-TW.

![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/backgrounds/grainient>)

[Read Updated: Grainient on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-grainient>)

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