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 ;)
Keine Kommentare vorhanden