Générateur de Text-Shadow CSS
Générez des valeurs text-shadow visuellement. Définissez le décalage, le flou et la couleur de chaque ombre ; ajoutez plusieurs ombres et copiez le CSS instantanément.
Preview
Shadows
CSS
text-shadow: 0px 2px 4px #00000040; Préréglages
Table des matières
Qu'est-ce que text-shadow ?
text-shadow est une propriété CSS qui dessine une ou plusieurs ombres derrière le texte. Vous définissez le décalage horizontal et vertical, le rayon de flou et la couleur. Contrairement à box-shadow, text-shadow n'a pas de diffusion ni d'interne — juste décalage, flou et couleur. Les ombres multiples sont séparées par des virgules.
Syntaxe
text-shadow: offset-x offset-y blur-radius color; Ombres multiples : text-shadow: shadow1, shadow2, ...; Les décalages et le flou sont en px. La couleur peut être hex, rgb ou rgba ; utilisez la transparence pour des ombres plus douces.
Cas d'utilisation
- Titres et en-têtes — Ombre douce pour la profondeur ou la lisibilité sur des arrière-plans chargés.
- Effet de contour — Petit décalage sans flou pour suggérer un contour.
- Lueur — Décalage zéro avec un grand flou et une couleur semi-transparente.
- Profondeur en couches — Plusieurs ombres pour une ombre portée plus réaliste.
Questions fréquentes
text-shadow s'applique uniquement au texte et n'a pas de diffusion ni d'interne — seulement offset-x, offset-y, blur et color. box-shadow s'applique à la boîte de l'élément et prend en charge la diffusion et l'interne.
Oui. Ajoutez plus d'ombres avec "Ajouter une ombre". Elles s'empilent dans l'ordre ; la première est au-dessus. Utilisez plusieurs ombres pour une profondeur en couches.