Generatore CSS di ombre del testo

Crea una pila di ombre del testo

1. Modifica il testo di esempio e spostamento orizzontale e verticale, raggio di sfocatura, colore e opacità di ogni livello attivo. I campi accettano centesimi; i cursori facilitano regolazioni intere.
2. Aggiungi, duplica, disattiva, rimuovi o sposta livelli. Il primo livello attivo è davanti alle altre ombre. I livelli disattivati conservano i valori ma sono omessi dal CSS.
3. Controlla il CSS e l’anteprima nativa, quindi seleziona Copia CSS. Viene copiata solo la dichiarazione dell’ombra; testo, tipografia e sfondo sono contesto dell’anteprima.

Comprendere i livelli creati

Ogni livello produce spostamento orizzontale, verticale e sfocatura non negativa in pixel CSS, seguiti da un colore RGBA esplicito. Valori negativi spostano a sinistra o in alto; sfocatura zero produce un’ombra netta spostata. La proprietà segue i glifi, non il riquadro rettangolare.

La prima ombra è disegnata davanti alle successive, mentre queste ombre esterne restano dietro al testo. Spostare i livelli può cambiare i colori sovrapposti. La pila è diversa da una sequenza di filtri in cui ogni operazione riceve il risultato precedente.

L’opacità dell’ombra diventa l’alfa del colore di quel livello. Per esempio 37,5% diventa esattamente 0.375 senza quantizzazione alfa a otto bit. L’opacità del testo è un’opzione separata: anche un testo trasparente può avere ombre visibili.

Un livello trasparente attivo resta nella dichiarazione. Disattivare tutti i livelli o svuotare l’elenco produce text-shadow: none;, che azzera esplicitamente le ombre ereditate; una dichiarazione vuota non valida non lo sostituisce.

Esempi di ordine, colore e trasparenza

Il primo livello dell’esempio usa -3.25px orizzontali, 6.5px verticali e sfocatura 0px, con #336699 al 37%. I canali sono 51, 102 e 153 e l’alfa è 0.37. Il secondo livello arancione usa 0px, -2px, sfocatura 12px e 80%.

Spostare il livello arancione in prima posizione cambia l’ordine separato da virgole senza modificarne i valori. L’anteprima mostra le sovrapposizioni; lo strumento non unisce duplicati, non ordina colori e non elimina livelli invisibili.

Un livello nero trasparente con spostamento e sfocatura zero è CSS valido anche senza ombra visibile. Disattivarlo lo rimuove dalla pila; senza livelli attivi il risultato è none.

Limiti di modifica e anteprima

L’editor accetta al massimo dodici livelli, spostamenti da -64 a 64 pixel CSS, sfocatura da 0 a 64, colori esadecimali a sei cifre e opacità da 0 a 100%, con precisione al centesimo. Usa intenzionalmente un sottoinsieme consolidato senza espansione, inset, currentColor, unità arbitrarie o importazione CSS; le specifiche più recenti discutono sintassi aggiuntive.

L’esempio usa testo semplice e un carattere locale di sistema. Caratteri sostitutivi, glifi, dimensioni e ritorni a capo influiscono sull’aspetto. Si copia solo text-shadow, quindi un’altra pagina può apparire diversa. Non è una certificazione di contrasto, leggibilità o uguaglianza dei pixel.

Le ombre non ampliano il layout del testo né l’area scorrevole. L’area con margine interno è approssimativa e i bordi possono tagliare sfocatura o spostamenti. Lo scorrimento non garantisce di vedere ogni pixel dell’ombra.

Valori non validi di livelli attivi eliminano CSS ed esempio stilizzato fino alla correzione. I valori dei livelli disattivati sono ignorati fino alla riattivazione. Opzioni di anteprima non valide nascondono solo l’esempio; il testo vuoto è consentito.

Stili locali senza caricare il testo

Lo strumento non aggiunge caricamenti, caratteri remoti, cronologia delle impostazioni, collegamenti con dati o telemetria con esempio e impostazioni. La copia è esplicita. Servizi esistenti, estensioni e copie conservate non sono coperti da una promessa universale di privacy o cancellazione.