Text Gradient Generator
Crea effetti testo con gradiente CSS usando background-clip. Anteprima live, copia CSS o SVG istantaneamente.
① Digita il tuo testo ② Personalizza colori, angolo e stile ③ Copia il CSS del gradiente
Testo
Dimensione
Peso
Font
Allineamento
Tipo
Color stop
0%
100%
Preset
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
Cos'è il testo con gradiente CSS?
Il testo con gradiente CSS usa la tecnica background-clip: text per applicare un gradiente come colore di riempimento del testo. Impostando -webkit-text-fill-color: transparent e background-clip: text, l'immagine del gradiente è visibile attraverso la forma del testo. Funziona con linear-gradient, radial-gradient e conic-gradient.
FAQ
background-clip: text ritaglia lo sfondo dell'elemento alla forma del suo testo. Combinato con -webkit-text-fill-color: transparent, il gradiente usato come sfondo diventa visibile solo attraverso i caratteri del testo, creando l'effetto gradiente.
-webkit-text-fill-color sovrascrive color per il riempimento del testo nei motori WebKit/Blink. Usare solo color: transparent potrebbe non nascondere completamente il testo in tutti i browser. Usarli entrambi garantisce risultati coerenti.
Il gradiente lineare fa transire i colori lungo una linea retta a un angolo scelto. Il radiale irradia dal centro verso l'esterno. Il conico spazza i colori attorno a un punto centrale come una ruota dei colori.
Il supporto è eccellente. Chrome, Edge, Opera e Firefox supportano background-clip: text senza prefisso. Safari richiede il prefisso -webkit-background-clip: text. Questo tool genera entrambe le proprietà per compatibilità completa.
Imposta background-size a 200% 200% e anima background-position in una regola @keyframes. Ad esempio: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }. Applica l'animazione all'elemento.
Il testo con gradiente funziona meglio per titoli hero, sezioni, nomi di brand ed elementi decorativi dove conta l'impatto visivo. Evitare per il corpo del testo o dimensioni piccole dove i gradienti riducono la leggibilità.
Verifica il contrasto per il color stop più chiaro rispetto allo sfondo. Non affidarsi solo al colore per trasmettere significato. Testa a dimensioni di font più piccole per confermare la leggibilità.