Obwohl dies nicht vollständig Cross-Browser-kompatibel ist, gibt es Möglichkeiten, reine CSS-Textgradienten mit ein bisschen Trick zu erstellen. Der Schlüssel ist die Verwendung einer Mischung aus Attributselektoren, webkit-spezifischen Eigenschaften und benutzerdefinierten HTML-Attributen.

Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!

---

Final Simple HTML

 
 Hallo Welt 

Durch die Verwendung von benutzerdefinierten Attributen können wir diese Werte in unserem Stylesheet mithilfe von attr () Funktion.

---

Finales CSS

 / * Nur h1s auswählen, die ein 'data-text'-Attribut enthalten * / h1 [data-text] position: relative; Farbe Rot;  h1 [Datentext] :: after content: attr (Datentext); z-Index: 2; Farbe grün; Position: absolut; links: 0; -webkit-mask-image: -webkit-gradient (linear, links oben, links unten, von (rgba (0,0,0,1)), Farbstopp (40%, rgba (0,0,0,0.) )));

Hinweis: Paulus verwies in den Kommentaren auf eine noch prägnantere Methode. Schauen Sie sich das auch an!