Générateur d'Ombre de Texte CSS

Contrôles

48px

Aperçu

Text Shadow

Sortie CSS

 
  
 
Règle complète
 
 
 
  
 
 
 
Comment l'utiliser
 
     
  1. Définissez le décalage — Faites glisser les curseurs X/Y pour positionner l'ombre derrière votre texte.
    2.  
  2. Ajustez le flou — Des valeurs plus élevées créent des ombres plus douces et diffuses.
    3.  
  3. Choisissez couleur & opacité — Sélectionnez n'importe quelle couleur et contrôlez la transparence.
    4.  
  4. Empilez les couches — Ajoutez jusqu'à 3 couches d'ombre pour des effets complexes comme la lueur ou le relief.
    5.  
  5. Copiez & collez — Cliquez sur « Copier le CSS » et utilisez-le directement dans votre feuille de style.
    6.  
 
 
 
Qu'est-ce que CSS text-shadow ?
 
text-shadow ajoute une ou plusieurs ombres au contenu textuel. Chaque ombre prend un décalage X, un décalage Y, un rayon de flou et une couleur — sans valeur d'étalement contrairement à box-shadow.
 
Plusieurs ombres séparées par des virgules créent des effets comme la lueur néon, la typographie en creux, le texte 3D et le texte enflammé. Pris en charge par tous les navigateurs modernes.
 
 
 
Cas d'usage courants
 
 
Titres hero
 
Texte à lueur néon
 
Effet en creux
 
Profondeur de texte 3D
 
Texte sur images
 
Stylisation de logo
 
 
Conseils & bonnes pratiques
 
 
 La lisibilité d'abord 
Des ombres subtiles améliorent la lisibilité sur des arrière-plans chargés. Des ombres lourdes peuvent nuire à la lecture.
 
 
 Astuce lueur néon 
Empilez 2-3 couches avec un flou croissant et une couleur vive sur fond sombre pour des effets néon.
 
 
 Effet en creux 
Utilisez une ombre blanche de 1px sous un texte sombre sur fond moyen pour un rendu en creux.
 
 
 Performance 
L'ombre de texte est accélérée par le GPU. Mais évitez les très grandes valeurs de flou sur de longs paragraphes.
 
 
 
Questions fréquentes
 
 
Quelle différence entre text-shadow et box-shadow ?
 
text-shadow suit la forme de chaque glyphe. box-shadow suit la boîte de bordure de l'élément. text-shadow n'a pas de valeur d'étalement.
 
 
 
Puis-je utiliser plusieurs ombres de texte ?
 
Oui. Séparez les valeurs par des virgules. Elles s'affichent dans l'ordre — la première listée est au-dessus.
 
 
 
text-shadow fonctionne-t-il dans tous les navigateurs ?
 
Oui. Entièrement pris en charge par Chrome, Firefox, Safari et Edge sans préfixe.
 
 
 
Puis-je animer text-shadow ?
 
Oui. text-shadow est animable avec les transitions et keyframes CSS. Gardez des valeurs de flou raisonnables pour une animation fluide.