Text Gradient Generator
Maak verbluffende CSS-verloopteksteffecten met background-clip. Live voorbeeld, kopieer CSS of SVG direct.
① Typ je tekst ② Pas kleuren, hoek en stijl aan ③ Kopieer de CSS-verloop
Tekst
Grootte
Gewicht
Lettertype
Uitlijning
Type
Kleurstops
0%
100%
Voorinstellingen
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
Wat is CSS-verlooptekst?
CSS-verlooptekst gebruikt de background-clip: text-techniek om een verloop als tekstvulkleur toe te passen. Door -webkit-text-fill-color: transparent en background-clip: text in te stellen, wordt het verloopbeeld zichtbaar door de tekstvorm. Dit werkt met linear-gradient, radial-gradient en conic-gradient.
FAQ
background-clip: text knipt de achtergrond van het element bij tot de vorm van de tekst. Gecombineerd met -webkit-text-fill-color: transparent wordt het verloop als achtergrond alleen zichtbaar door de teksttekens.
-webkit-text-fill-color overschrijft color voor de tekstvulling in WebKit/Blink-engines. Alleen color: transparent gebruiken verbergt de tekstvulling mogelijk niet volledig in alle browsers.
Lineaire verlopen laten kleuren overgaan langs een rechte lijn onder een gekozen hoek. Radiale verlopen stralen vanuit het midden naar buiten. Conische verlopen vegen kleuren rond een middenpunt als een kleurenwiel.
De ondersteuning is uitstekend. Chrome, Edge, Opera en Firefox ondersteunen background-clip: text zonder prefix. Safari vereist het prefix -webkit-background-clip: text. Deze tool genereert beide eigenschappen voor volledige compatibiliteit.
Stel background-size in op 200% 200% en animeer background-position in een @keyframes-regel. Bijvoorbeeld: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }.
Verlooptekst werkt het beste voor hero-koppen, sectietitels, merknamen en decoratieve elementen. Vermijd het voor lopende tekst of kleine formaten waar verlopen de leesbaarheid verminderen.
Controleer het contrast voor de lichtste kleurstop ten opzichte van de achtergrond. Vertrouw niet alleen op kleur om betekenis over te brengen. Test bij kleinere lettergroottes om de leesbaarheid te bevestigen.