CSS allows you to apply a gradient to the text itself rather than the element's background by using background-clip: text combined with -webkit-background-clip and color: transparent. This technique creates visually striking typography while keeping the element's background unaffected.

Key CSS Properties

1
background – Define a linear or radial gradient to use as the text fill.
2
-webkit-background-clip: text – Clips the background to the text for WebKit-based browsers.
3
background-clip: text – Standard property for browsers that support it.
4
color: transparent – Makes the text color transparent so the gradient shows through.
5
-webkit-text-fill-color: transparent – Ensures gradient is visible in WebKit browsers.

Example: Gradient Text

In this example, the text appears filled with a horizontal gradient from pink to purple while the rest of the element's background remains unaffected. This technique works best for headings, logos, or decorative text.

Best Practices

1
Use high-contrast gradients to maintain readability.
2
Avoid using too many colors in a small text block to prevent visual clutter.
3
Combine with large, bold fonts for maximum effect.
4
Test across browsers, as some older browsers may require -webkit- prefixes.
5
Consider accessibility: ensure text remains readable when the gradient is applied.

Difficulty: 5/10

Topics: background-clip, gradient, cross-browser support

Scenario Questions

0-2 years experience

1
You have a <h1> heading and need the text to display a blue‑to‑purple gradient while the rest of the page stays white. How would you write the CSS?
2
If you apply a linear‑gradient to an element's background without any extra properties, what do you see, and how do you change it so only the text shows the gradient?
3
Which CSS properties must you combine to make the gradient appear only on the text, and why do you set the text color to transparent?

2-5 years experience

1
We have a component that renders product titles with gradient text, but on Safari the gradient disappears. Walk me through how you'd debug and fix it.
2
The design system wants to allow dynamic gradient colors via CSS variables. How would you implement gradient text that respects those variables while providing a fallback for browsers that don't support background-clip:text?
3
During a refactor a teammate removed the -webkit- prefix and the gradient stopped working on some browsers. Explain why the prefix matters and how you'd ensure cross‑browser support.

5-8 years experience

1
Our marketing site uses gradient text on many headings. At scale we notice increased paint time and occasional flicker on low‑end devices. How would you evaluate the performance impact and what strategies could you employ to mitigate it?
2
We need to expose gradient text as a reusable component in our design system that works with server‑side rendering and theming. What architectural considerations would you make regarding CSS‑in‑JS vs static CSS, fallback handling, and accessibility?
3
If the product must support high‑contrast mode for accessibility, how would you adapt gradient text to meet WCAG while preserving the brand look?

8+ years experience

1
Our company is migrating a legacy monolithic app to a micro‑frontend architecture. The legacy code uses inline styles for gradient text with vendor prefixes. How would you plan a migration strategy that standardizes gradient text implementation across teams, minimizes duplication, and ensures backward compatibility?
2
We want to introduce a global theming service that allows runtime changes to gradient colors across all apps. Discuss the trade‑offs between using CSS custom properties, a JavaScript theming API, and pre‑compiled CSS, especially regarding cache invalidation and bundle size.
3
Considering future browser deprecations (e.g., removal of -webkit-background-clip), how would you design a forward‑compatible approach for gradient text that balances maintainability and progressive enhancement?

Follow-up Questions

❓What would the page look like if you left out color: transparent?
❓How do you make the gradient degrade gracefully on browsers that don't support background-clip:text?
❓Are there any accessibility concerns with using gradient text?