CSS Text Gradient Generator

CSS gradient text requires three properties working together on the text element. First, set background to a gradient value — for example background: linear-gradient(90deg, #ff6b6b, #4ecdc4);. Then set -webkit-background-clip: text; and background-clip: text; to clip the gradient to the shape of the characters. Finally, set color: transparent; so the text itself becomes invisible and the clipped gradient shows through. Without that last step the gradient sits behind solid-coloured text and you see nothing.

A linear-gradient transitions colours along a straight line at a given angle — for example left to right, top to bottom, or any diagonal. A radial-gradient radiates outward from a central point in a circular or elliptical pattern. For text, linear gradients are by far the most common because they follow the natural reading direction of the characters and tend to look cleaner at smaller text sizes. Radial gradients work well for large display headings where the circular spread is visible across the full width of the text.

Yes, in all modern browsers. The background-clip: text technique is supported in Chrome, Firefox, Safari, and Edge. The -webkit-background-clip: text prefix is still recommended alongside the unprefixed version for the widest compatibility, particularly older Safari and iOS versions. In very old browsers that support neither, the color: transparent declaration will cause the text to disappear entirely, so it is worth setting a solid fallback colour first: color: #ff6b6b; color: transparent; — browsers that do not understand the gradient will use the solid colour instead.

Gradients themselves cannot be directly transitioned or animated with CSS, because background-position rather than the gradient colours is what changes. The most common technique is to make the gradient much wider than the element — using background-size: 200% 200% — and then animate background-position with a @keyframes rule to make the colours appear to shift across the text. Alternatively, you can use CSS custom properties inside the gradient and animate those with Houdini's @property rule in browsers that support it, which enables true colour interpolation.

The most common cause is a missing color: transparent; declaration — without it, the solid text colour sits on top of the gradient and hides it. Also check that both -webkit-background-clip: text; and background-clip: text; are present, as omitting either can cause the gradient to appear as a background rectangle rather than following the text shape. A third common issue is applying the gradient to an inline element like <span> without setting display: inline-block or display: block — some browsers do not apply background-clip correctly to purely inline elements.

For a linear-gradient, the direction is set by the first argument. You can use keyword directions like to right, to bottom, to bottom right, or a specific angle in degrees such as 45deg (where 0deg is bottom-to-top and 90deg is left-to-right). For a radial-gradient, the position is controlled with the at keyword — for example radial-gradient(circle at top left, #ff6b6b, #4ecdc4) starts the gradient from the top-left corner of the element.

Yes, you can add as many colour stops as you like. Each stop is a colour value optionally followed by a position percentage. For example: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 33%, #6bcb77 66%, #4d96ff 100%) produces a four-colour rainbow-style gradient. You can also use the color-stop() hint between stops to control how quickly one colour transitions into the next, and colour stops can use any CSS colour format including hex, rgb, hsl, and oklch.

Yes, the same technique works on any text-containing element including <a> links and <button> elements. For links, remember that the color property is typically overridden by the browser's default link styles, so you may need to explicitly reset it with color: transparent in your selector rather than relying on inheritance. For buttons, make sure to remove or override the default background-color set by the browser, as it can interfere with the gradient background you are trying to clip to the text.

-webkit-background-clip: text is the prefixed version of background-clip: text that was required by older WebKit-based browsers (Chrome and Safari) before the property was standardised. Chrome has supported the unprefixed version for some time, but Safari only added it more recently, so including both is still the safest approach for broad compatibility — particularly if you need to support iOS Safari users on older devices. Including the prefixed version alongside the standard one carries no downside for modern browsers.

Yes, the gradient text technique is completely independent of which font you use. Load your Google Font as normal via a <link> tag or @import, apply it with font-family, and then add the gradient properties on top. The effect tends to look best with bold, thick typefaces where the gradient colours have more character area to show through — lighter or thin fonts may not show the gradient as clearly, especially at smaller sizes.