Generatore di effetti CSS per testo
Digita il tuo testo e vedi in anteprima effetti CSS reali: bagliore neon, estrusione 3D, letterpress, contorno e riempimento sfumato, con parametri calcolati matematicamente e un blocco CSS da copiare.
🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.
Risultato
La maggior parte delle gallerie di effetti CSS per testo offre un preset fisso: un bagliore neon, un'estrusione 3D, prendere o lasciare. Questo generatore costruisce invece il CSS a partire dai tuoi parametri, sul testo che digiti. Scegli bagliore neon, estrusione 3D, letterpress/rilievo, contorno o riempimento sfumato dal selettore, regola i controlli specifici di quell'effetto e sia l'anteprima in tempo reale che il blocco CSS copiabile sottostante si aggiornano a ogni modifica.
L'effetto estrusione 3D merita un approfondimento: per una data profondità (numero di strati impilati) e un angolo, lo strato i-esimo è traslato di i × cos(angolo) in orizzontale e i × sin(angolo) in verticale, calcolati in JavaScript con le reali funzioni trigonometriche — non letti da una tabella di angoli predefiniti. A 45 gradi gli offset orizzontale e verticale sono uguali per ogni strato, perché coseno e seno di 45° hanno lo stesso valore; ruota il cursore dell'angolo e guarda l'intera pila di strati `text-shadow` ruotare intorno alle lettere in tempo reale, ognuno leggermente più scuro del precedente per simulare una faccia 3D illuminata.
Il bagliore neon impila quattro strati `text-shadow` con raggio di sfocatura crescente nel colore scelto, con un effetto sfarfallio opzionale: attivalo e viene generata una regola `@keyframes` con una sequenza casuale di cali di opacità, animata in tempo reale, e un pulsante Mescola ti permette di rimescolare lo schema senza scrivere un singolo keyframe a mano. Il testo contornato applica `-webkit-text-stroke` per i browser che lo supportano, più un onesto fallback `text-shadow` a 8 direzioni per quelli che non lo fanno — entrambe le righe sono presenti nel CSS copiato con una nota sul perché. Il riempimento sfumato ritaglia un `linear-gradient` alla forma del testo con `background-clip: text`, ormai una proprietà standard con ampio supporto, mantenendo la vecchia riga con prefisso `-webkit-` per i motori più datati.
Tutto viene elaborato localmente nel tuo browser — nessun testo che digiti viene mai inviato altrove. Copia il blocco CSS finito, inclusa la regola `@keyframes` quando l'effetto lo richiede, direttamente nel tuo foglio di stile.