Hoe werkt verlooptekst in CSS?

CSS heeft geen eigenschap voor ‘tekstverloop’. De gebruikelijke truc is om een verloop als achtergrond van het element weer te geven, die achtergrond met background-clip: text in de vorm van de letters te knippen en de tekstvulling transparant te maken, zodat het verloop erdoorheen zichtbaar is.

Beschrijving van de tool

Typ je tekst, kies een begin- en eindkleur, stel de hoek in en de tool toont een livevoorbeeld en geeft je de CSS om te kopiëren. Je kunt ook de lettertypefamilie, het gewicht en de grootte aanpassen, zodat het voorbeeld overeenkomt met wat je op je pagina gaat gebruiken.

De gegenereerde regel ziet er als volgt uit:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

De volledige uitvoer bevat ook de lettertype-instellingen en afbreekregels.

Functies

  • Lineair verloop met twee kleuren en een hoek van 0 tot 360 graden
  • Instellingen voor lettertypefamilie, gewicht en grootte
  • Livevoorbeeld dat je als afbeelding kunt exporteren, plus CSS die je direct kunt kopiëren en plakken