Categoria: Sviluppo

Generatore di CSS text-shadow

Idea internaManca uno strumento?

Sovrapponi più text-shadow e copia il CSS

Imposta uno spostamento, una sfocatura, un colore e un'opacità, e ottieni una dichiarazione text-shadow multilivello costruita a partire da quella base, con un'anteprima dal vivo e un pulsante per copiare il CSS finito.

Anteprima dell'ombra

Output
text-shadow:
  1px 1px 2px rgba(23, 33, 28, 0.5),
  1px 1px 4px rgba(23, 33, 28, 0.39),
  2px 2px 6px rgba(23, 33, 28, 0.28);

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Una singola text-shadow si legge come un contorno piatto e dai bordi netti, mentre un bagliore morbido o un effetto di ombra impilata ha bisogno di più livelli che si riducono in spostamento e sfocatura mentre svaniscono in opacità. Questo strumento ricava l'intera pila dallo spostamento, sfocatura, colore e opacità di base che imposti, la stessa tecnica di sovrapposizione usata dal generatore di livelli box-shadow, così devi ragionare su una sola ombra invece di scrivere a mano diverse ombre separate da virgole.

Come si usa

  1. Imposta quanti livelli generare e lo spostamento e la sfocatura di base.
  2. Scegli un colore e un'opacità.
  3. Controlla l'anteprima dal vivo, poi copia la dichiarazione text-shadow.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Perché aggiungere livelli rende l'ombra più morbida?
Ogni livello aggiuntivo si riduce avvicinandosi al testo mentre svanisce in opacità, così i livelli insieme si leggono come un gradiente morbido di ombra invece che come una copia dai bordi netti.
Viene inviato qualcosa a un server?
No. La dichiarazione è calcolata nella pagina a partire dai valori che imposti, ed è per questo che l'anteprima si aggiorna all'istante.
Posso usarlo per un effetto neon o di bagliore?
Sì. Un colore brillante con una grande sfocatura e diversi livelli si legge come un bagliore; un colore scuro con piccoli spostamenti e poca sfocatura si legge invece come una sottile ombra di profondità.