How to make gradient text in CSS

Start with real HTML text and apply the gradient to its background. This preserves the heading's meaning, selection and responsive behaviour.

.gradient-text {
  background-image: linear-gradient(120deg, #5b5cf0, #d946ef, #ff8a4c);
}

background-clip: text limits the painted background to the glyphs. The prefixed version is still commonly included, and the normal text colour is set to transparent.

.gradient-text {
  background-image: linear-gradient(120deg, #5b5cf0, #d946ef, #ff8a4c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Use gradient text for large, short display copy rather than essential body text. Set a readable solid colour before the gradient rules if you need a fallback, and check contrast across every part of the background.