Générateur de text-shadow CSS
Créez des effets text-shadow CSS multicouches : halos, contours, 3D rétro et texte en relief. Aperçu en direct avec votre texte et code à copier.
Préréglages
Calques
Réglages de l’aperçu
Aperçu
Ombre
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Outils Connexes
Voir ToutQu'est-ce que Générateur de text-shadow CSS ?
Cet outil construit la propriété CSS text-shadow à partir d'une ou plusieurs couches. Chaque couche a un décalage horizontal et vertical, un flou, une couleur et une opacité, et l'aperçu affiche votre propre texte d'exemple avec le résultat.
Comment utiliser Générateur de text-shadow CSS
- Partez d'un préréglage comme Halo, Rétro, Contour ou Relief, ou gardez l'ombre par défaut.
- Sélectionnez un calque et réglez Décalage horizontal, Décalage vertical, Flou, Couleur de l'ombre et Opacité.
- Ajoutez des calques pour des contours ou des effets 3D empilés ; supprimez ceux dont vous n'avez pas besoin.
- Saisissez votre propre Texte d'exemple et choisissez les couleurs du texte et du fond pour vérifier la lisibilité.
- Copiez le code CSS.
Exemple
x 3px, y 3px, blur 0, color #ff0000, opacity 1
text-shadow: 3px 3px 0 #ff0000;
Quand utiliser Générateur de text-shadow CSS
Utilisez-le pour des titres, des textes de bandeau, des effets néon ou rétro et des ombres discrètes qui améliorent le contraste sur des images. Pour un vrai contour sur du grand texte, -webkit-text-stroke donne un résultat plus net que des ombres empilées ; évitez les ombres marquées sur le corps de texte car elles réduisent la lisibilité.
Comment fonctionne Générateur de text-shadow CSS
Chaque couche est écrite sous la forme x y flou couleur (text-shadow n'a ni étendue ni inset). Les décalages et le flou sont en px, l'opacité s'applique à l'alpha de la couleur, ce qui donne de l'hexadécimal pour les couleurs opaques et rgba() sinon. Les couches sont séparées par des virgules ; la première est dessinée au-dessus. Le préréglage Contour utilise quatre décalages de 1px dans chaque direction diagonale, ce qui est la façon habituelle en CSS pur de simuler un trait de texte.
Cas d'utilisation courants
- Titres à halo néon
- Texte blanc lisible sur des photos
- Titres 3D rétro empilés
- Faux contours de texte sans SVG
- Étiquettes en relief ou façon typographie
Questions Fréquentes
Pourquoi n'y a-t-il pas d'option d'étendue ?
La propriété CSS text-shadow n'accepte que des décalages, un flou et une couleur. Pour rendre une ombre plus épaisse, empilez plusieurs couches avec de petits décalages.
Puis-je créer un halo néon ?
Oui : utilisez des décalages nuls et deux ou trois couches de flou croissant dans la même couleur vive, comme dans le préréglage Halo.
text-shadow affecte-t-il la mise en page ?
Non. Les ombres sont dessinées en dehors du texte sans occuper d'espace : elles ne déplacent jamais les éléments voisins.