# GradientRevealText

> GradientRevealText is an interactive and visually appealing text component designed for modern web interfaces. It allows text to be highlighted with a smooth gradient reveal in multiple directions—left-to-right, right-to-left, top-to-bottom, or bottom-to-top. The component supports hover, in-view, or automatic triggers, and developers can customize the gradient, transition duration, delay, and rounded edges. Importantly, when the gradient is applied, the text color automatically changes to white, ensuring high contrast and readability, while reverting to black when inactive. Lightweight, flexible, and reusable, GradientRevealText is ideal for headings, hero sections, buttons, and any UI element that needs an attention-grabbing, dynamic effect.

- 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/gradient-reveal-text

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/gradient-reveal-text?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