gradient text generator

How to use the gradient text generator

  1. Type your text.
  2. Pick a gradient type — linear, radial, or conic — and configure color stops. Same interface as the main gradient generator.
  3. Adjust angle (for linear) and direction.
  4. Optionally add animated gradient mode (the text continuously shifts through the color stops).
  5. Copy CSS — output uses background-clip: text; color: transparent to paint the gradient inside the text.

When to use it

Use gradient text for hero headlines, section titles, and logos — anywhere a solid color feels flat and the text is large enough to show the gradient. Avoid at small sizes (under 24px); the gradient disappears and the text looks muddy. Don't use for body copy. Alternative: figma plugins offer similar gradient text but require export to image; CSS gradient text scales natively and remains selectable.

Example

.hero-title {
  background: linear-gradient(135deg, #ef4444, #a855f7, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Animated rainbow text */
@keyframes rainbow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animated-gradient-text {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #a855f7);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 3s ease infinite;
}

Frequently asked questions

Why does the text become invisible?
The background-clip rule clips the background to the text shape, but color: transparent must be set so the text's own color doesn't overlay the gradient. Both properties are required.
Does it work on all browsers?
Yes — -webkit-background-clip: text is supported universally despite the vendor prefix, plus the standard background-clip: text is now widely supported. Include both for maximum compatibility.
Can I select and copy gradient text?
Yes — it's still real text, searchable and selectable. Accessibility tools see the underlying text normally.
How do I add a fallback for older browsers?
Set a regular color value that matches one of the gradient stops; it's used when background-clip: text isn't supported.
Does it work on SVG text?
Yes, but the syntax is different. Use <linearGradient> with a fill="url(#id)" reference on the <text> element. See the SVG spec for details.

Related generators

Last updated: 2026-04-23