⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di effetti di testo CSS

Digita il tuo testo e visualizza in anteprima dal vivo effetti CSS reali di neon, estrusione 3D, stampa tipografica, delineati e riempimento sfumato, con parametri calcolati tramite matematica reale e un blocco CSS copiabile.

Elaborazione... 0%

Risultato

La maggior parte delle gallerie di effetti di testo CSS ti offrono un preset fisso: un bagliore al neon, un'estrusione 3D, prendilo o lascialo. Questo generatore costruisce invece il CSS dai tuoi parametri, sul testo che effettivamente digiti. Scegli bagliore al neon, estrusione 3D, stampa tipografica/rilievo, contorno o riempimento sfumato dalla selezione dell'effetto, regola i controlli dell'effetto e l'anteprima dal vivo più il blocco CSS copiabile sotto di esso si aggiornano ad ogni modifica.

L'effetto di estrusione 3D è quello che vale la pena comprendere: per una profondità (numero di strati impilati) e un angolo scelti, lo strato i è sfalsato di i × cos(angolo) in orizzontale e i × sin(angolo) in verticale, calcolato in JavaScript con le reali funzioni trigonometriche - non lette da una tabella di ricerca di angoli preimpostati. A 45 gradi gli offset orizzontali e verticali risultano uguali per ogni layer, perché coseno e seno di 45° hanno lo stesso valore; ruota il cursore dell'angolo e osserva l'intera pila di strati di "ombra di testo" oscillare attorno alle lettere in tempo reale, ognuno scurito un po' di più dell'ultimo per simulare una faccia 3D illuminata.

Il bagliore al neon sovrappone quattro strati di "ombra di testo" con un raggio di sfocatura crescente nel colore scelto, con uno sfarfallio opzionale: attivalo e una regola "@keyframes" con una sequenza casuale di cali di opacità viene generata e animata dal vivo, e un pulsante di riproduzione casuale ti consente di ripetere il pattern senza scrivere a mano un singolo fotogramma chiave. Il testo delineato applica `-webkit-text-stroke` per i browser che lo supportano, oltre a un onesto fallback `text-shadow` a 8 direzioni per quelli che non lo supportano: entrambe le righe vengono fornite nel CSS copiato con una nota sul perché. Il riempimento sfumato ritaglia un `gradiente lineare` alla forma del testo con ` background-clip: text`, ora una proprietà standard con ampio supporto, mantenendo la vecchia riga con prefisso `-webkit-` per i motori legacy.

Tutto viene visualizzato localmente nel tuo browser: nessun testo digitato viene mai inviato da nessuna parte. Copia il blocco CSS finito, inclusa la regola "@keyframes" quando l'effetto ne ha bisogno, direttamente nel tuo foglio di stile.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Cinque effetti reali: bagliore al neon, estrusione 3D, stampa tipografica/rilievo, contorno e riempimento sfumato, ciascuno con i propri controlli dei parametri (colori, cursori profondità/angolo, interruzioni sfumatura).
  • Il bagliore al neon include un'animazione di sfarfallio opzionale con un modello di opacità `@keyframes` casuale che puoi rimescolare senza toccare i CSS manualmente.
  • L'estrusione 3D ti consente di trascinare la profondità (numero di livelli) e l'angolo in modo indipendente; l'offset dei pixel di ogni livello e la tonalità progressivamente più scura vengono ricalcolati in tempo reale.

Vantaggi principali

✓ La profondità di estrusione 3D è calcolata dalla trigonometria reale: l'offset di ogni strato è cos(angolo) e sin(angolo) moltiplicato per la sua distanza, quindi la modifica dell'angolo fa ruotare l'intera estrusione esattamente come farebbero i veri caratteri 3D.
✓ Ogni effetto viene visualizzato in anteprima sul testo effettivamente digitato, in tempo reale, in modo da poter giudicare la leggibilità e il contrasto prima di copiare qualsiasi cosa.
✓ L'output copiabile rimane onesto riguardo al supporto del browser: gli effetti di contorno e di riempimento sfumato forniscono entrambi una linea di fallback basata su standard insieme alla proprietà specifica di WebKit, con una nota che spiega il motivo.

Casi d'uso

  • • Componi un'insegna al neon per cercare il titolo della pagina di destinazione, attiva l'animazione di sfarfallio casuale e copia l'ombra del testo finita più il blocco @keyframes.
  • • Imposta la profondità di estrusione 3D su 8 e l'angolo su 30 gradi per un grosso trattamento del logo isometrico, quindi copia lo stack di testo-ombra calcolato direttamente nel tuo foglio di stile.
  • • Crea un testo del titolo delineato includendo sia la riga -webkit-text-stroke che il suo fallback text-shadow, in modo che la struttura venga comunque visualizzata nei browser senza supporto del tratto.