a11y.skipToMainContent
1

CSS Testo Shadow Generator

Artigianato CSS ombre di testo visivamente — strati di stack, provare presets, e copiare il testo-ombra CSS pulito.

px

Presets

Shadow layers

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Text Shadow Generator

  1. Digitare il testo del campione e scegliere il testo e i colori di sfondo per l'anteprima.
  2. Aggiungere strati di ombra e regolare ogni strato X, Y, blur, colore e alfa.
  3. Oppure fare clic su una preimpostazione — neon, 3D, profilo, retro o fuoco — per caricare un set di strati pronti.
  4. Fare clic su Copia CSS per afferrare la dichiarazione dell'ombra di testo separato dalla virgola.

Che cos'e'?

La proprietà CSS text-shadow aggiunge una o più ombre dietro il testo, ciascuna definita da un offset X, un offset Y, un raggio di sfocatura e un colore. Accatastando diverse ombre separate da virgola è possibile costruire gomiti, estrusioni 3D dure, contorni e altri effetti da una singola dichiarazione. Questo generatore dà ad ogni ombra il proprio strato con il pieno controllo su offset, sfocatura e alfa di colore, più preset di un clic per lucentezza neon, ombre lunghe 3D, contorni, retro e fuoco. Scegli il tuo testo e i colori di sfondo per visualizzare in anteprima l'effetto in contesto, quindi copia il finale text-shadow

Advertisement

FAQ

Come impilare più ombre di testo?
Separare ogni ombra con una virgola all'interno di un'unica dichiarazione di testo-ombra, per esempio: 1px 1px 0 #000, 2px 2px 0 #555. Il browser li dipinge in ordine, così ombre precedenti siedono in cima. Questo strumento costruisce quell'elenco separato da virgola per voi come si aggiungono strati.
Posso creare un effetto neon luminoso?
Si'. Un bagliore di neon è diverse ombre sfocate dello stesso colore luminoso senza offset, impilate da un forte bagliore interno a un ampio alone esterno. Utilizzare il preset Neon glow come punto di partenza, quindi modificare la sfocatura e i colori da gustare.
L'ombra di testo è supportata ovunque?
Sì. text-shadow è supportato in ogni browser moderno senza alcun prefisso del fornitore, tra cui ombre separate da virgola multistrato.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement