How do you create gradient text in CSS?

WHAT THIS TESTS: This question probes whether you understand the relationship between an element's background layer and its foreground text content. Senior engineers should know that text is painted on top of backgrounds by default, and that background-clip can redefine the painting area. It also checks if you grasp the critical third step: making the text itself transparent so the clipped background becomes visible. The interviewer wants to hear precise property interaction, not just a list of tricks.

A GOOD ANSWER COVERS: A strong answer walks through three properties in order. First, set background-image to a linear-gradient or radial-gradient so there is an actual background to display. Second, set background-clip to text so the browser restricts the background painting to the shape of the glyphs rather than the entire border or padding box. Third, set color to transparent because the foreground text color sits above the background in the stacking order; if the text remains opaque, it completely obscures the clipped gradient. Mentioning that background-clip: text is widely supported since mid-2015 but still benefits from a -webkit- prefix in some legacy contexts shows production awareness.

COMMON WRONG ANSWERS: Candidates often forget color: transparent and only mention background-clip: text, which produces no visible effect because the solid text fill hides the gradient. Another red flag is immediately jumping to SVG masks or mix-blend-mode hacks without demonstrating knowledge of the standard CSS approach. Some also confuse background-clip with background-origin, claiming the latter controls clipping when it actually controls positioning. Suggesting that background-clip: text works on the root element is also incorrect, as the spec explicitly excludes it.

LIKELY FOLLOW-UPS: An interviewer might ask how you would add a fallback solid color for older browsers, which you can do by declaring a standard color before color: transparent and letting the cascade override it where supported. They might also ask about performance implications of using gradients on large headings, or how this technique behaves with text-decoration and text-shadow. You could also be asked to explain why the gradient repeats if background-size is not set, or how to animate the gradient position.

ONE CONCRETE EXAMPLE: Imagine a marketing site hero heading that needs a gold-to-purple gradient. You would write a rule targeting the H1: set background-image to linear-gradient from gold to purple, set background-clip to text, and set color to transparent. If the design also requires a subtle shadow, you must note that text-shadow paints independently and will still appear around the transparent glyphs, which may or may not be desired. For accessibility, you should ensure the underlying HTML text remains selectable and readable by screen readers because this technique only affects visual rendering.

Source: developer.mozilla.org