How to create text gradients in CSS.

To apply a gradient color to your text, first, you need to create a background gradient:

.text-gradient {
  /* color: linear-gradient(to right, darkblue, darkorchid); 👈 not working */
  background: linear-gradient(to right, darkblue, darkorchid);
}

then, you need to clip the background using the text as a clipping mask, and hide the text:

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

To progressively support all browsers:

.text-gradient {
  /* 👇 show a solid color in older browsers (e.g., IE11) */
  color: darkblue;
}

/* 👇 show the text gradient in modern browsers */
@supports (--css: variables) {
  .text-gradient {
    background: linear-gradient(to right, darkblue, darkorchid);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

This technique allows you to apply gradients to single words or multiple text lines.

Here's an example: