Shimmer Text
ProAnimated gradient shimmer text effect using background-clip and CSS keyframes.
Text · primitive · basic · css · zero dependencies
shimmer-text Text·preview
Ember sweepBuilt to be pasted
Slow3s
Default2s
Fast1s
Shimmer Text
Animated gradient shimmer text effect using background-clip and CSS keyframes.
Use it for
- hero headline accent
- pricing page limited-time highlight
- product launch announcement text
- SaaS landing page eyebrow heading
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Text content to apply the shimmer effect to. |
className | string | — | Additional classes for the wrapper — font size, weight, layout. |
speed | "slow" | "default" | "fast" | "default" | Animation speed — maps to 3s, 2s, or 1s. |
colors | string[] | ["#a78bfa", "#6366f1", "#8b5cf6", "#a78bfa"] | Gradient color stops — at least 2 colors; repeat the first color last for a seamless loop. |
background | string | "transparent" | Background color behind the shimmer, useful for contrast. |
FAQ
Does Shimmer Text work with Next.js App Router?
Yes. It's a "use client" React component and works unchanged in the App Router.
Are there any dependencies to install?
None. It's a pure CSS background-clip: text animation — no external packages required.
Is it responsive?
Yes. Font size and layout come from your own Tailwind classes via className, and the gradient scales with the text box at any size.
Does it respect prefers-reduced-motion?
Yes, built in. A @media (prefers-reduced-motion: reduce) rule disables the shimmer animation for users with that OS preference.