Generatore di Testo Glitch CSS

Che cos'è questo strumento?

Un effetto glitch CSS simula l'aspetto di un segnale televisivo corrotto o di una cassetta VHS danneggiata duplicando un testo due volte con gli pseudo-elementi ::before e ::after, spostando leggermente ogni copia con un'ombra di testo colorata (classicamente rosso e ciano, che richiamano gli errori del segnale RGB analogico), e animando il clip-path di ogni copia con @keyframes così che diverse fasce orizzontali di ciascuna copia colorata lampeggino nel tempo.

La tecnica non richiede immagini, né un loop di animazione JavaScript, né canvas — è puro CSS sovrapposto su un unico elemento HTML che porta il proprio testo due volte: una come contenuto testuale reale, e una tramite un attributo data-text che gli pseudo-elementi leggono con content: attr(data-text).

Fonte: CSS Pseudo-Elements Module Level 4, W3C — definisce gli pseudo-elementi ::before/::after e la funzione attr() su cui si basa questo effetto.

Perché usarlo?

• Anteprima animata dal vivo — vedi il vero effetto glitch mentre scrivi e regoli le impostazioni, non solo un mockup statico.
• Due colori d'accento regolabili in modo indipendente, con il classico rosso/ciano come default ma personalizzabili per qualsiasi brand o tema.
• Il cursore dell'intensità regola lo spostamento in pixel dell'ombra colorata; quello della velocità controlla quanto è rapido il ciclo dei keyframes del clip-path.
• Copia sia il CSS (compresi i blocchi @keyframes completi) sia la struttura HTML esatta necessaria, poiché l'effetto dipende da un attributo data-text che corrisponda al testo visibile.
• CSS puro — nessun JavaScript a runtime una volta sulla tua pagina, e nessuna libreria esterna o immagine da caricare.
• Gratis, senza registrazione, funziona interamente nel tuo browser.

Come si usa

1. Scrivi il testo che vuoi rendere glitchato nel campo di testo — l'anteprima si aggiorna immediatamente.
2. Scegli due colori d'accento; il default classico è rosso e ciano per un look retrò a separazione RGB, ma qualsiasi coppia di colori contrastanti funziona.
3. Regola il cursore dell'intensità per controllare quanto sono distanziati i due strati di colore — valori più alti si leggono come un glitch più aggressivo.
4. Regola il cursore della velocità per controllare quanto velocemente lampeggia il glitch.
5. Copia il blocco CSS e incollalo nel tuo foglio di stile.
6. Copia lo snippet HTML e usalo esattamente così com'è — l'attributo data-text deve corrispondere esattamente al testo visibile dell'elemento affinché l'effetto funzioni.

Esempio

Input

Testo: "GLITCH" · Colore 1: #ff0040 (rosso) · Colore 2: #00fff9 (ciano) · Intensità: 5px

Risultato

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Il testo di base resta bianco mentre le sue due copie negli pseudo-elementi lampeggiano in rosso e ciano ai lati, producendo il classico look da segnale corrotto.

Perché l'elemento ha bisogno di un attributo data-text

Gli pseudo-elementi ::before e ::after non possono leggere direttamente il normale contenuto testuale di un elemento — content: attr() in CSS funziona solo con veri attributi HTML, non con nodi di testo figli. Ecco perché l'HTML generato ripete il testo come attributo data-text="..." sullo stesso elemento: il testo visibile viene renderizzato normalmente, mentre ogni pseudo-elemento ottiene indipendentemente la stessa stringa tramite content: attr(data-text) e sovrappone la propria copia animata e spostata di colore.

Come viene prodotto il lampeggio

Ogni pseudo-elemento è animato con un proprio blocco @keyframes che scorre una serie di valori clip-path: inset(...). A ogni keyframe viene rivelata una fascia orizzontale diversa della copia colorata mentre il resto viene ritagliato, così il frammento visibile di rosso (o ciano) salta verticalmente mentre l'animazione viene riprodotta — combinato con lo spostamento dell'ombra colorata, questo si legge come canali di colore strappati e disallineati piuttosto che un semplice bagliore.

Dove trova posto questo effetto

• Titoli hero su landing page gaming, cyberpunk, streaming o di brand musicali.
• Pagine di errore / 404, dove un glitch rafforza il tema 'qualcosa si è rotto'.
• Stati hover o focus su un titolo o un logo per un accento breve e accattivante.
• Stati di caricamento o 'elaborazione', dove un glitch comunica attività di sistema.
• Usalo con parsimonia sul testo del corpo — l'effetto è volutamente difficile da leggere a colpo d'occhio, quindi funziona meglio su titoli brevi o logotipi, non su paragrafi.

Abbinamento con altri strumenti CSS

Un titolo glitch è spesso solo un elemento in un layout più ampio, scuro e ad alto contrasto. Combinalo con un'ombra soffusa o angoli arrotondati dagli altri strumenti CSS qui sotto per un risultato più curato.

→ Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo

Domande frequenti