Text mit einem Farbverlauf oder einer Grafik „befüllen“

Text mit einem Farbverlauf oder einer Grafik „befüllen“

Überschriften müssen nicht langweilig sein. Ihr könnt diese mit einem Farbverlauf oder sogar einem eigenen Bild als „Schriftfarbe“ definieren.

Definiert in der CSS-Klasse die Elemente background-image, background-clip und color.

<style>
.your-element {
    background-image: linear-gradient(90deg, blue, yellow);
    background-clip: text;
    color: transparent;
}
</style>

Statt einem Farbverlauf könnt Ihr die Eigenschaft background-image auch mit einem „richtigen“ Bild befüllen. Bei diesem Hintergrundbild könnt ihr dann auch die Eigenschaften background-size, background-position etc. zuweisen.

<style>
.your-element {
    background-image: url("path/to/your/image.jpg");
    background-clip: text;
    color: transparent;
    background-position: center center;
    background-size: contain;
}
</style>

Im Video haben wir das alles nochmals ausführlich Schritt für Schritt beschrieben.