Générateur d'ombre de texte CSS (text-shadow)

Comment ça marche

Indiquez la couleur de l'ombre sur une seule ligne à gauche — HEX fonctionne, tout comme rgb() ou hsl(). Travaillez ensuite avec les quatre curseurs : les deux décalages fixent la direction dans laquelle l'ombre tombe, le flou règle la douceur de son bord et l'opacité décide de ce que le fond laisse encore voir. Pour un titre avec une profondeur discrète, partez de 2 pixels de décalage, 6 pixels de flou et 40 % d'opacité — le code s'écrit 2px 2px 6px rgba(0, 0, 0, 0.4). Pour un effet néon, mettez les deux décalages à 0, poussez le flou vers 20 à 30 pixels et choisissez une couleur vive : l'ombre se répartit également autour de chaque lettre et devient une lumière. Pour un effet gravé, ramenez le flou à 0 et le décalage à 1 pixel. Le texte d'exemple se redessine à chaque changement ; récupérez la règle terminée dans le panneau de droite, et s'il vous faut une image de l'effet, le bouton Télécharger enregistre un PNG de 1200×630 pixels.

Cet outil est aussi connu sous le nom de generateur text shadow css, ombre texte css, text shadow css, effet neon texte css, ombre sur titre css, text shadow exemples.

Qu'est-ce que text-shadow ?

La propriété text-shadow peint une ombre derrière les caractères d'un texte. Ses valeurs sont, dans l'ordre, un décalage horizontal, un décalage vertical, un flou facultatif et une couleur ; plusieurs groupes séparés par des virgules empilent des couches d'ombre sur le même texte. L'ombre épouse le contour visible de chaque caractère — elle s'applique à la forme des lettres, pas au rectangle de l'élément. Ni la place occupée par le texte ni la mise en ligne ne bougent : un titre gagne de la profondeur sans que rien ne se déplace sur la page.

Qu'est-ce que Rayon de flou (blur) ?

Le rayon de flou est le troisième nombre : il indique sur combien de pixels le bord de l'ombre s'estompe. À 0, l'ombre est une copie du texte au bord net ; plus la valeur grandit, plus l'ombre s'étale, s'élargit et s'éclaircit. Augmenter le flou pendant que les deux décalages restent à 0 répartit l'ombre également dans toutes les directions — c'est la base des effets néon et halo. Le rayon ne peut pas être négatif ; c'est pourquoi le curseur de cet outil commence à 0.

Quelle est la différence entre text-shadow et box-shadow ?

Les deux suivent la même logique de valeurs mais n'ombragent pas la même chose : text-shadow épouse les contours visibles des lettres, box-shadow se dessine contre le rectangle de l'élément. Donnez un box-shadow à un titre et l'ombre tombe sous la boîte invisible qui entoure le texte — pas sous les lettres. La syntaxe diffère aussi : text-shadow n'a pas de valeur d'étalement et ignore inset ; en revanche, l'empilement de couches est bien plus courant avec text-shadow, car les effets néon et gravé se construisent par couches. Règle pratique : text-shadow pour les lettres, box-shadow pour les cartes et les boîtes.

Le piège du contraste : une ombre ne sauve pas un texte illisible

Le mauvais usage le plus courant de text-shadow consiste à vouloir corriger un contraste insuffisant avec une ombre. Une ombre sombre aide réellement un titre blanc posé sur une photo — mais les contrôles d'accessibilité (le rapport de contraste WCAG) se mesurent entre la couleur du texte et le fond, et ignorent complètement l'ombre. Une combinaison fausse à la base, comme un texte clair sur un fond clair, ne se rattrape pas ainsi : choisissez d'abord des couleurs lisibles, puis ajoutez l'ombre comme profondeur.

Le second piège est l'ombre dure et totalement opaque : flou à 0, opacité à 100 % et grand décalage font ressembler l'ombre à une seconde impression du texte ; aux petites tailles, ce bord doublé gêne sérieusement la lecture. La règle la plus sûre : pas d'ombre sur le texte courant — réservez-la aux titres et aux grands éléments.

Quelle ombre de texte pour quel usage ?

Les quatre mêmes valeurs, dosées autrement, produisent des effets très différents ; le code garde toujours le même motif.

• Titre blanc sur une photo → 0 2 8 à 50-60 % d'opacité : le texte se détache de l'image
• Profondeur discrète sur un titre de page → 2 2 6 à 30-40 % : visible mais calme
• Néon / halo → 0 0 24 avec une couleur vive à 80-100 % : sans décalage, l'ombre entoure chaque lettre
• Effet gravé → 0 1 0 totalement opaque : un pixel clair sur fond sombre, un pixel sombre sur fond clair

Questions fréquentes

Que signifie l'ordre des valeurs de text-shadow ?

La lecture ne change jamais : le décalage horizontal d'abord, puis le vertical, puis le flou, la couleur en dernier. À la différence de box-shadow, il n'y a ni valeur d'étalement (spread) ni mot-clé inset — après les trois nombres vient directement la couleur. La règle générée écrit les quatre parties en toutes lettres ; quel que soit le curseur déplacé, vous retrouvez son nombre dans le code.

Puis-je superposer plusieurs couches d'ombre sur le même texte ?

Oui : les couches s'écrivent à la suite, séparées par des virgules, et c'est ainsi qu'un vrai néon se construit — trois couches de la même couleur avec 10, 20 et 40 pixels de flou se superposent. Cette page n'écrit volontairement qu'une couche pour que la règle reste simple ; pour empiler, générez plusieurs résultats avec des réglages différents et reliez vous-même les parties par des virgules.

Que contient le fichier PNG téléchargé ?

Le texte d'exemple avec son ombre, en 1200×630 pixels — pratique pour glisser l'effet en image dans une validation de maquette ou un message. Le code lui-même n'est pas dans le fichier : récupérez-le dans le panneau de droite avec le bouton de copie, où il attend après chaque changement.

L'ombre a-t-elle le même rendu dans tous les navigateurs ?

La syntaxe des valeurs est identique dans tous les navigateurs actuels et text-shadow est pris en charge depuis de nombreuses années. La douceur du flou peut cependant varier finement d'un moteur de rendu à l'autre ; pour un design critique, vérifiez une fois le rendu dans le navigateur cible.