# DualToneRainBackground

> ChatGPT said:  This Dual-Tone Rain Background component is a visually rich full-screen background built for Next.js. It combines a flowing rain effect with a layered glow pattern, all styled using pure CSS and Tailwind utilities. The design avoids rainbow clutter by sticking to just two complementary colors—a neon blue and a neon purple—that contrast beautifully against the dark gradient backdrop. Subtle animations make the streaks move downward continuously, while softly shifting glow orbs add depth and ambiance. On top of these animated layers, a blurred grid overlay creates extra texture, giving the whole section a futuristic and atmospheric look. The component is lightweight, responsive, and easy to drop into hero sections, landing pages, or dashboards where you want a dynamic yet professional background that stands out without overwhelming the content.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/dual-tone-rain-background

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/dual-tone-rain-background?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt