Designed for modern teams
Ship faster,
build with confidence.
The platform your developers have been waiting for. Powerful, simple, and built to scale.
TextFree
Animated Gradient
An indigo-purple-fuchsia gradient sweeps back and forth through text — 100% CSS, zero JavaScript, one class to apply.
Gradient Flow
Hover or click the scene to interact
This effect is free — the Text category contains 56 effects total, including 4 free. Effect.Labs has 811 vanilla effects. Explore the category →
Usage examples
Ship faster,
Built for modern teams
Move faster,
ship with confidence.
The all-in-one platform that turns your ideas into products, automatically.
Luminary
Your work. Reimagined.
How it works
The effect relies on two CSS properties working together: background-clip: text (declared in the background shorthand via the text keyword) and -webkit-text-fill-color: transparent. Together they make the element's background visible only through the glyph shapes — the gradient literally becomes the text color.
The gradient is sized at 300% of the element's width (background-size: 300% 100%), leaving two-thirds of its surface off-screen. The start and end colors are identical (indigo #6366f1), making the loop visually seamless: no visible cut occurs when the animation restarts.
The motion is driven by a single @keyframes gradientMove oscillation: at 0% and 100% the position is 0% 0%; at 50% it shifts to 100% 100%. With linear timing, the gradient moves left-to-right then back at constant speed — a back-and-forth sweep rather than a unidirectional scroll.
The source file contains two @keyframes gradientMove blocks with the same name. In CSS, the last one wins (cascade rule). The first keyframe (unidirectional scroll) is therefore inactive; only the second (oscillation) applies. This is predictable and exploitable: deleting the second block in your stylesheet restores the unidirectional scroll.
Accessibility
- prefers-reduced-motion: ABSENT from the code — the animation loops indefinitely regardless of the OS setting. For motion-sensitive projects, add
@media (prefers-reduced-motion: reduce) { .text-animated-gradient { animation: none; } }. - The text stays in the normal DOM flow — screen readers read it without obstacle, independently of the visual effect.
- The effect is purely decorative and non-interactive: no keyboard focus to manage, no interaction required.
- The gradient contrast (indigo/purple/fuchsia) is sufficient on dark backgrounds (
#0a0a0f), but may fall below the WCAG AA threshold on light backgrounds — verify against your actual palette and background. - No ARIA attributes are required for a decorative inline text element; if the element carries strong semantic meaning, it remains accessible through its plain text content.
Browser compatibility
Requires background-clip: text and -webkit-text-fill-color — supported in all modern browsers since 2021.
Chrome 85+✓ Full
Firefox 86+✓ Full
Safari 14+✓ Full
Edge 85+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full
If <code>background-clip: text</code> is not supported, text renders with its inherited color (typically white or black) — readable, no errors.
The code
Copy the three blocks into your page. No dependencies.
HTML
<span class="demo-text text-animated-gradient">Gradient Flow</span>
CSS
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-animated-gradient {
background: linear-gradient(90deg, rgb(99, 102, 241), rgb(139, 92, 246), rgb(217, 70, 239), rgb(99, 102, 241)) 0% 0% / 300% 100% text;
-webkit-text-fill-color: transparent;
animation: 4s linear 0s infinite normal none running gradientMove;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
}
@keyframes gradientMove {
0%, 100% {
background-position: 0% 0%, 100% 100%;
}
50% {
background-position: 100% 100%, 0% 0%;
}
}
JavaScript (fx-0629)
// Effet CSS pur — pas de JavaScript nécessaireCustomize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Gradient colors | indigo → purple → fuchsia → indigo | Edit the 4 color stops in linear-gradient(90deg, …) inside .text-animated-gradient. The 1st and 4th colors must match for a seamless loop. |
| background-size: 300% 100% | 300% | Increase to 400–500% for smoother transitions; reduce to 200% for a sharper contrast between extremes. |
| animation: 4s linear … | 4s | Adjust the duration: 2s = energetic badge, 6–8s = contemplative headline. linear gives constant speed; swap for ease-in-out to slow at the extremes. |
| font-size: 2.5rem | 2.5rem | Text size in .demo-text — the effect is visible from 1 rem but striking at 3 rem and above. |
| font-weight: 800 | 800 | Font weight — a weight ≥ 700 makes the gradient more legible as glyphs cover more surface area. |
| letter-spacing: -0.02em | -0.02em | Tracking — use a positive value (0.06–0.12em) on uppercase badges for breathing room. |
| @keyframes gradientMove (1st block) | inactive | The first block (unidirectional scroll from 0% to 300%) is overridden by the second. Delete the second block to enable a one-direction scroll instead. |
FAQ
Does the effect require JavaScript?
No — Animated Gradient is 100% CSS. No script needed: add the .text-animated-gradient class to any <span>, <h1>, or inline element, paste the CSS block, and the animation starts. Compatible with all frameworks (React, Vue, Svelte, Angular) without an adapter.
Why are there two <code>@keyframes gradientMove</code> blocks in the source?
In CSS, when two @keyframes share the same name in the same stylesheet, the last one declared wins (cascade rule). The second keyframe (oscillation) therefore overrides the first (unidirectional scroll). To get a one-direction scroll instead, delete the second @keyframes gradientMove block in your local copy.
How do I adapt the colors to my brand palette?
Replace the 4 color values in linear-gradient(90deg, C1, C2, C3, C1) inside the background property. The key rule: the 1st and 4th colors must be identical for an imperceptible loop. Brand-blue example: linear-gradient(90deg, #0ea5e9, #6366f1, #8b5cf6, #0ea5e9).
