CSS Text Farbverläufe

Hier eine kleine Erklärung wie man Textverläufe in CSS erstellt.

Um einen Farbverlauf auf eurem Text anzuwenden, müssen ihr zunächst einen Hintergrundfarbverlauf erstellen:

.gradient-text {
  background: linear-gradient(to right, orange, darkorange);
}

dann müsst ihr den Hintergrund mit dem Text als Beschneidemaske beschneiden und den Text ausblenden:

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

Um alle Browser zu unterstützen muss man einen Fallback einbauen:

.gradient-text {
  // Ältere Browser (z.B. IE11)
  color: orange;

  // Moderne Browser
  @supports (--css: variables) {
    background: linear-gradient(to right, orange, darkorange);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Viel Spass damit ;)