Générateur text-shadow : ombres de texte CSS en couches

Mode d'emploi

Saisissez votre texte dans Texte d'exemple. L'aperçu le montre avec l'ombre, pour juger du résultat sur vos propres mots.
Réglez le Décalage horizontal (px), le Décalage vertical (px) et le Flou (px) du premier calque. Un décalage vertical positif fait descendre l'ombre.
Choisissez la Couleur de l'ombre et l'Opacité de chaque calque, et ajoutez-en avec Ajouter un calque pour une lueur plus douce.
Copiez la déclaration CSS et collez-la dans la règle de votre texte.

Comment la valeur est construite

La propriété text-shadow accepte une ombre ou une liste d'ombres séparées par des virgules. Chaque ombre a ses décalages horizontal et vertical et un rayon de flou, qui peut être omis, et une couleur, qui peut s'écrire avant ou après les longueurs. La spécification CSS Text Decoration donne la grammaire. La première ombre est dessinée au-dessus des autres ; sans ombre, la valeur est none.

Une ombre de texte n'a pas d'étalement, contrairement à une ombre de boîte. Le rayon de flou n'est jamais négatif, et un flou plus grand étale l'ombre sur une zone plus large. L'opacité s'écrit comme la valeur alpha d'une couleur rgba, avec au plus deux décimales. Une longueur nulle n'a pas besoin d'unité, si bien que l'outil écrit 0.

text-shadow: décalage-x décalage-y flou couleur, décalage-x décalage-y flou couleur, …

Calques et contrôles de l'éditeur

Une lueur douce utilise souvent deux ou trois calques : une petite ombre foncée proche des lettres, et une plus grande, plus claire, plus loin. L'éditeur accepte jusqu'à 8 calques, des décalages de −200 à 200 pixels, un flou de 0 à 100 pixels et une opacité de 0 à 100 %.

Les couleurs de l'aperçu, celles du texte et du fond, ne servent qu'à l'aperçu. Elles ne font pas partie du CSS : la déclaration donne donc l'ombre et rien d'autre.

Exemple détaillé : une ombre noire sous une lueur bleue

Le premier calque a un décalage de 0 et 2 pixels, un flou de 4 pixels et du noir à une opacité de 30 %. Le second n'a aucun décalage, un flou de 12 pixels et le bleu #3b82f6 à 50 %.

La valeur est 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), et la déclaration est text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);

Questions fréquentes

Quelle est la différence entre le flou et un second calque ?

Le flou adoucit le bord d'une ombre, qui s'estompe sur une zone plus large. Un second calque ajoute une autre ombre avec son propre décalage, sa couleur et son opacité, qui peut être dessinée à un autre endroit que la première.

Pourquoi les décalages ont-ils un signe ?

Un décalage horizontal positif déplace l'ombre vers la droite, et un négatif vers la gauche. Un décalage vertical positif la fait descendre : une ombre qui tombe sous le texte a donc une valeur positive.

Une ombre de texte peut-elle avoir un étalement ?

Non. La propriété text-shadow ne prend qu'un décalage, un flou et une couleur. Une ombre de boîte a un étalement, mais le texte n'en a pas, si bien que l'éditeur n'en propose pas.

Pourquoi l'aperçu diffère-t-il de ma page ?

L'aperçu utilise le texte d'exemple, la taille et les couleurs que vous réglez ici. Sur votre page, l'ombre tombe sur votre propre police, votre taille et votre fond : vérifiez donc le résultat sur place avant de finir.

Ce que je saisis est-il enregistré ou envoyé à un serveur ?

Non. Le texte d'exemple, l'aperçu et le CSS sont produits dans votre navigateur. Rien n'est stocké ni envoyé à notre serveur : copiez donc la déclaration avant de quitter la page.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.