Générateur de Text Shadow
Le générateur de text-shadow CSS règle le décalage, le flou, la couleur et l’opacité de l’ombre de texte avec un aperçu en direct, et vous permet d’empiler plusieurs couches d’ombre pour des effets lumineux, de contour et de texte 3D.
À propos de cet outil
Le générateur de text-shadow CSS règle le décalage, le flou, la couleur et l’opacité de l’ombre de texte avec un aperçu en direct, et vous permet d’empiler plusieurs couches d’ombre pour des effets lumineux, de contour et de texte 3D.
Mode d’emploi
- Réglez le décalage horizontal et vertical ainsi que le flou.
- Choisissez la couleur et l’opacité de l’ombre, ainsi que la couleur et la taille du texte.
- Cliquez sur Ajouter une couche pour empiler une autre ombre ; Réinitialiser les couches permet de repartir de zéro.
- Cliquez sur Copier le CSS.
Bon à savoir
- La syntaxe de text-shadow est : offset-x offset-y blur-radius color.
- Contrairement à box-shadow, text-shadow n’a ni valeur spread ni mot-clé inset.
- Plusieurs ombres se séparent par des virgules, la première étant dessinée au-dessus.
- Une ombre sans décalage mais avec du flou crée un effet lumineux (glow).
- Empiler plusieurs décalages de 1 px donne un effet 3D ou typographie en relief.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment ajouter une ombre à un texte en CSS ?
Utilisez text-shadow, par exemple text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Comment créer un texte lumineux ?
Utilisez des décalages nuls avec du flou et une couleur vive, par exemple text-shadow: 0 0 8px #1db954; empilez des couches pour un halo plus intense.
Peut-on utiliser plusieurs ombres de texte ?
Oui. Séparez les ombres par des virgules ; cet outil ajoute chaque couche pour vous.
text-shadow a-t-il un effet sur la lisibilité ?
Des ombres discrètes peuvent améliorer la lisibilité sur des images, mais des ombres marquées nuisent à la netteté : vérifiez le contraste avec un vérificateur de contraste.