Softonic

Generatore di Ombre per Testo CSS

Passaggio 1 / 2
Genera CSS

Costruire una dichiarazione text-shadow a occhio in DevTools funziona, ma diventa un gioco di ipotesi nel momento in cui hai bisogno di un bagliore neomorfico morbido, di un’ombra retro a due strati o di un contorno nitido di 1px su un titolo principale. Questo generatore ti consente di impostare l’offset X, l’offset Y, il raggio di sfocatura e un colore RGBA e copiare una riga CSS pronta per essere incollata.

Come costruire un'ombra per testo

  1. 1

    Imposta gli offset

    X è l'offset orizzontale in pixel, Y è verticale. Un Y positivo spinge l'ombra verso il basso, un Y negativo la spinge verso l'alto.

  2. 2

    Scegli il raggio di sfocatura

    Una sfocatura di 0 dà una silhouette netta; valori più alti sfumano l'ombra. Le classiche ombre morbide usano 4–12px di sfocatura.

  3. 3

    Scegli un colore

    Usa una stringa RGBA così puoi regolare l'opacità. `rgba(0,0,0,0.35)` è un valore predefinito sicuro per una profondità sottile su sfondi chiari.

  4. 4

    Copia la dichiarazione

    Lo strumento genera `text-shadow: Xpx Ypx Blurpx colore;`, inseriscilo nel selettore corrispondente nel tuo foglio di stile.

Ricette di ombre per testo che sembrano davvero belle

Un’ombra per testo è la somma di quattro numeri e un colore. Ricordalo e potrai ricreare quasi qualsiasi effetto visto su una rivista o una landing page.

Scheda di riferimento

Effetto Dichiarazione
Profondità sottile text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Ombra morbida text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Contorno 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro doppio text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Bagliore al neon text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Sovrapporre più ombre

text-shadow accetta un elenco separato da virgole. Il browser disegna con l’algoritmo del pittore, nell’ordine del codice: l’ultima ombra dell’elenco finisce dietro tutte le altre. Sfrutta questo per simulare contorni (quattro ombre nette da 1px nelle quattro direzioni) o per creare profondità sovrapponendo un’ombra vicina netta e un’ombra lontana sfumata.

Quando evitare text-shadow

  • Su testo di corpo molto piccolo, una sfocatura superiore a 2px farà sembrare i glifi sfocati. Preferisci -webkit-font-smoothing e un contrasto più forte.
  • Per le animazioni della sezione hero critiche per le prestazioni, evita più di tre ombre sovrapposte; ogni livello costringe il browser a ri-rasterizzare il testo.
  • Se hai bisogno di un’ombra con un offset stretto su un percorso complesso (curve, rotazioni), considera un SVG <filter> con feDropShadow invece, seguirà il contorno del glifo in modo più accurato.

Domande frequenti

L’output è un singolo strato di ombra per design. Per sovrapporre effetti, esegui il generatore più volte e concatena i risultati con le virgole, ad esempio text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow segue i contorni dei glifi del testo renderizzato. box-shadow segue il bordo rettangolare dell’elemento. Prendono parametri simili ma rasterizzano contro forme completamente diverse.

I browser rasterizzano le ombre del testo contro la griglia dei pixel del dispositivo. Un’ombra con sfocatura 0 su un display 2x verrà renderizzata in posizioni sub-pixel e può apparire leggermente morbida. Aumentare la sfocatura a 1 di solito la pulisce senza cambiare il peso visivo.

I valori che inserisci vengono inviati al nostro server per costruire la dichiarazione, ma non vengono archiviati né riutilizzati. Nella vista a più passaggi viaggiano nel link tra i passaggi; nella vista a una sola pagina non viene conservato nulla, aggiorna la pagina e tutto è andato.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue