Dans cet article
Ce que fait CSS Text Shadow
La propriété CSS text-shadow ajoute des effets d'ombre aux caractères de texte. Chaque ombre est définie par un décalage horizontal, un décalage vertical, un rayon de flou et une couleur. Contrairement à box-shadow, text-shadow suit la forme exacte de chaque glyphe de caractère, créant des effets qui épousent les formes des lettres.
Vous pouvez empiler plusieurs ombres sur un seul élément en les séparant par des virgules. Cela permet des effets complexes comme des lueurs néon, des lettres en relief, des extrusions 3D et du texte enflammé — le tout en CSS pur, sans images ni canvas nécessaires.
Utiliser le générateur de text shadow
Le générateur fournit des contrôles intuitifs pour créer des ombres de texte sans mémoriser la syntaxe CSS. Vous pouvez ajuster chaque paramètre en temps réel et voir le résultat instantanément.
- Contrôles de décalage — glissez les curseurs ou entrez des valeurs en pixels exactes pour le décalage horizontal (X) et vertical (Y) pour positionner l'ombre par rapport au texte
- Rayon de flou — augmentez le flou pour des effets doux et lumineux ou gardez-le à zéro pour des ombres nettes qui ressemblent à des duplications solides
- Couches multiples — ajoutez plusieurs couches d'ombre et réordonnez-les pour créer des effets composites complexes comme des contours, des lueurs et de la profondeur
Essayez gratuitement — sans inscription
Générer le CSS Text Shadow →Effets de texte créatifs avec text shadow
Les ombres de texte ne servent pas uniquement aux effets de profondeur subtils. En combinant plusieurs couches d'ombre avec différents décalages, valeurs de flou et couleurs, vous pouvez créer des effets visuels saisissants entièrement en CSS.
- Lueur néon — utilisez un décalage nul avec un grand rayon de flou et une couleur vive (cyan, magenta, vert) répétée en plusieurs couches avec un flou croissant pour simuler une lueur de tube néon
- Relief et letterpress — combinez une ombre claire légèrement décalée en bas à droite avec une ombre sombre légèrement décalée en haut à gauche sur un fond gris moyen pour créer un effet pressé dans le métal
- Extrusion 3D — empilez de nombreuses ombres avec des décalages croissants (1px 1px, 2px 2px, 3px 3px...) dans des couleurs progressivement plus sombres pour créer un effet de texte tridimensionnel
Questions fréquemment posées
Est-ce que text-shadow affecte les performances ?
Les ombres simples ont un impact négligeable sur les performances. Cependant, empiler de nombreuses ombres avec de grands rayons de flou peut causer des ralentissements de rendu, surtout sur les appareils mobiles. Pour les effets complexes, testez sur les appareils cibles.
Quels navigateurs supportent text-shadow ?
Text-shadow bénéficie d'un excellent support dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et les navigateurs mobiles. Il est supporté depuis IE10 et peut être utilisé sans solutions de repli en production.
Peut-on animer text-shadow avec des transitions CSS ?
Oui. Text-shadow est entièrement animable avec les transitions CSS et les animations keyframe. Vous pouvez faire des transitions fluides entre différents états d'ombre pour les effets de survol et les animations.