🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

November 24, 2020

Text Gradients

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) {
    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:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us