Hero Heading Gradient
Use a bold gradient across a large heading to create a strong focal point in a hero section or landing page.
CSS Text Gradient Generator
Free CSS Typography Tool
Create colorful CSS gradient text effects visually. Choose linear or radial gradients, adjust color stops and angle, preview the result and copy clean CSS code.
This CSS Text Gradient Generator is a free visual tool for creating gradient-filled
typography with pure CSS. It combines CSS gradients with
background-clip: text so that the gradient appears inside the text
characters.
You can create linear or radial gradients, reposition color stops, change colors and adjust the gradient direction. The generated text remains selectable and searchable because the effect is applied to normal HTML text rather than an image.
Use a bold gradient across a large heading to create a strong focal point in a hero section or landing page.
Gradient text can combine several brand colors inside a wordmark while keeping the logo text selectable.
Warm orange, pink and purple colors can create a sunset-style text effect for creative pages and promotional banners.
Several gray, white and dark color stops can simulate metallic or chrome typography.
A larger gradient background combined with animated background position can create moving color across a heading.
CSS gradient text uses a gradient as the element background and clips that background to the text characters. The original text fill is made transparent so the background becomes visible inside the letters.
.heading {
background: linear-gradient(90deg, #33a1fd, #eb5252, #fdca40);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
Linear gradients move colors along a straight line. They are the most common choice for headings, logos and call-to-action text.
.heading {
background: linear-gradient(90deg, #2563eb, #7c3aed, #db2777);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
Radial gradients expand outward from a central point. They can create spotlight, highlight or glowing color effects inside text.
.heading {
background: radial-gradient(circle, #ffffff, #60a5fa, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
For linear gradients, the angle controls the direction in which colors flow.
A value of 90deg moves the gradient from left to right, while
180deg moves it from top to bottom.
.heading {
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
}
Color stops control where each color appears inside the gradient. Adding more stops allows you to create smoother transitions or more complex effects.
.heading {
background: linear-gradient(
90deg,
#2563eb 0%,
#7c3aed 50%,
#db2777 100%
);
}
The prefixed property -webkit-background-clip: text is still useful for
compatibility with Chromium-based browsers and Safari. The standard
background-clip: text property should also be included.
A solid fallback color can be declared before the gradient-related properties. Older browsers that do not support clipped gradient text can then display normal text.
.heading {
color: #2563eb;
background: linear-gradient(90deg, #2563eb, #db2777);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Gradient text can be animated by increasing the background size and changing
background-position.
.animated-heading {
background: linear-gradient(
90deg,
#2563eb,
#7c3aed,
#db2777,
#2563eb
);
background-size: 300% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: move-gradient 5s linear infinite;
}
@keyframes move-gradient {
from {
background-position: 0 50%;
}
to {
background-position: 100% 50%;
}
}
Gradient text remains available to screen readers because it is still real HTML text. However, some parts of a gradient may have insufficient contrast against the page background. Test the full text effect carefully and avoid using complex gradients for body text.
Apply a CSS gradient as the background, clip the background to the text and make the original text fill transparent.
The background-clip: text property limits the background to the shape
of the text characters.
It hides the original text color in Chromium and Safari so the clipped gradient remains visible.
Yes. Replace linear-gradient() with
radial-gradient() and use the same background clipping technique.
Yes. Increase the gradient background size and animate
background-position with CSS keyframes.
The text remains selectable and available to screen readers, but you must ensure that all parts of the gradient have sufficient contrast against the background.
Yes. Modern browsers support the technique, although including WebKit-prefixed properties improves compatibility.