CSS Text Shadow : Effets, néon et astuces typographiques
Maîtrisez la syntaxe text-shadow, la lueur néon, les effets de relief et le texte lisible sur images.
CSS text-shadow ajoute de la profondeur, de la lueur et de la dimension à la typographie. Contrairement à box-shadow, text-shadow suit la forme des caractères individuels.
Les ombres multiples superposées créent les effets text-shadow les plus impressionnants.
Syntaxe text-shadow
La syntaxe text-shadow est : text-shadow: offset-x offset-y blur-radius color. Contrairement à box-shadow, il n'y a pas de spread-radius ni de mot-clé inset.
Outil gratuit Générateur de text-shadow Créez des effets de lueur néon, relief et ombres de texte créativesOmbres de texte multiples
Plusieurs valeurs text-shadow créent de riches effets typographiques. Technique pour la profondeur : trois ombres avec la même couleur mais différentes valeurs de flou.
Effet de lueur néon
Le texte néon utilise des ombres superposées avec un flou croissant. Recette typique : première ombre 0 0 7px avec la couleur de lueur, deuxième 0 0 10px, troisième 0 0 21px.
Outil gratuit Générateur de dégradé de texte Créez des effets de texte dégradé colorés avec CSSEffets emboss et deboss
Effet emboss (texte en relief) : deux ombres — ombre sombre en bas à droite, ombre claire en haut à gauche. Deboss : inverser les positions des ombres.
Texte lisible sur images
text-shadow avec un flou élevé et une couleur sombre crée un halo doux : text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6).
Exemples typographiques créatifs
Texte 3D : superposer 10-20 ombres identiques décalées de 1px dans la même direction. Impression rétro : ombre dure décalée de 1-2px dans une couleur contrastante.
Outil gratuit Générateur de gamme typographique Générez une gamme typographique harmonieuse pour votre système de design