Ce générateur d’ombres de texte CSS permet de concevoir et d’exporter des effets d’ombre de texte dans votre navigateur sans écrire une seule ligne de code.
Construisez des ombres visuellement. Ajustez chaque paramètre en temps réel et regardez la mise à jour de l'aperçu instantanément.
Ce que vous pouvez faire
- Ajoutez plusieurs calques d'ombre et empilez-les pour créer des effets complexes et multidimensionnels
- Contrôlez le décalage horizontal, le décalage vertical, le flou, la répartition, l'opacité et la couleur par calque
- Faites glisser et réorganisez les calques pour modifier la façon dont ils s'empilent.
- Choisissez parmi 8 préréglages intégrés, y compris Neon Glow, Fire, Emboss, Retro Hard et plus encore
- Testez votre design contre n'importe quelle couleur d'arrière-plan ou un damier (pour tester la transparence)
- Ajuster la famille de polices, la taille, le poids, l'espacement des lettres, la hauteur de ligne et la couleur du texte
- Copier le résultat comme une règle CSS complète, une valeur
text-shadownue, ou une classe Tailwind arbitraire
Le curseur de propagation simule un effet de propagation CSS en utilisant des décalages d'ombres en couches, puisque text-shadow n'a pas de support de propagation natif.
Pas de dépendances. Pas d'installation. Collez la sortie directement dans votre feuille de style.
Qu'est-ce qu'un générateur d'ombre de texte CSS ?
Un générateur d'ombre de texte css est un outil basé sur un navigateur qui construit une valeur d'ombre de texte à travers des curseurs, des sélecteurs de couleurs et un aperçu en direct au lieu d'une syntaxe saisie à la main.
Il se trouve dans le monde plus large de l'outillage css (EN), à côté des générateurs de dégradés, de bordures et d'animation.
Saisissez un décalage horizontal, un décalage vertical, un rayon de flou et une couleur, et l’outil rend l’effet sur l’exemple de texte en temps réel.
Deux choses séparent un générateur d'une simple page de référence :
- Un volet d'aperçu en direct qui se met à jour lorsque les valeurs changent
- Un extrait de code CSS prêt à copier, déjà formaté et syntaxiquement correct
Personne ne mémorise l'ordre exact de l'offset-x, de l'offset-y, du rayon de flou et de la couleur du premier coup. C'est vraiment la raison pour laquelle ces outils existent.
Comment fonctionne la propriété CSS Text-Shadow ?
La propriété text-shadow dans css3 prend une valeur séparée par des virgules construite à partir de quatre parties : offset-x, offset-y, blur-radius, et color.
Offset-x déplace l'ombre à gauche ou à droite. Offset-y le déplace vers le haut ou le bas.
Une valeur négative sur l'un ou l'autre axe inverse la direction. Un décalage-x positif pousse l'ombre vers la droite, un décalage-x négatif la tire vers la gauche.
Blur-radius contrôle la douceur du bord de l'ombre.
Réglez-le sur zéro pour une copie nette et nette du texte. Poussez-le plus haut et le bord s'étend et s'estompe, ce qui constitue essentiellement la façon dont un effet de lueur est créé.
Les quatre parties, dans l'ordre requis :
- Offset-x (obligatoire)
- Offset-y (obligatoire)
- blur-radius (facultatif, valeur par défaut 0)
- couleur (facultatif, par défaut currentColor)
Une seule ombre ressemble à ceci dans une feuille de style :
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}MDN Web Docs (EN) répertorie ce même ordre en quatre parties dans sa référence officielle. La spécification derrière elle, maintenue par le groupe de travail CSS, est le CSS Text Decoration Module Level 3 (EN).
La propriété a une histoire étrange. Il est apparu pour la première fois dans CSS2, a été abandonné de CSS2.1 entièrement, puis est revenu dans CSS3 sous le même module Text Decoration.
Comment superposer plusieurs ombres de texte pour la profondeur et la lueur ?
Plusieurs valeurs d’ombre de texte sont empilées dans une liste unique séparée par des virgules, et chacune d’entre elles est rendue comme son propre calque derrière le texte.
La première ombre de la liste est la plus proche du texte. Chaque ombre écrite après elle rend plus loin en arrière, dans l'ordre où elle apparaît.
Stratification de profondeur
Les effets de profondeur utilisent plusieurs ombres avec un décalage croissant et une couleur sombre fixe, de sorte que chaque calque s'empile légèrement plus loin que le précédent.
text-shadow:
0.1em 0.1em 0 #ccc,
0.2em 0.2em 0 #999,
0.3em 0.3em 0 #666;Chaque couche se trouve un incrément plus loin, ce qui crée l'aspect extrudé et étagé.
Glow layering
Les effets de lueur ignorent complètement le décalage et empilent le flou à la place.
Une lueur néon typique utilise trois ou quatre ombres, toutes à 0 0, avec le rayon de flou montant sur chacune et une couleur saturée comme le cyan ou le magenta.
Certains effets poussent cela plus loin avec des ombres superposées dans des couleurs contrastées légèrement éloignées les unes des autres, ce qui constitue le mécanisme de base derrière l'aspect du texte glitch.
Empiler trop de couches ralentit la repeinture sur les appareils moins puissants. La plupart des générateurs limitent le nombre d'ombres à environ cinq à huit avant que l'effet ne vaille plus le coût.
Quels formats de couleur fonctionnent le mieux dans une valeur d'ombre de texte ?
Text-shadow accepte les mêmes formats de couleur que le reste du css : hex, rgba, et hsla.
| Format | Exemple | Le meilleur pour |
|---|---|---|
| Hex | #1a1a1a | Ombres plates, opaques |
| Rgba | rgba(0,0,0,0.6) | Semi-transparent, bords doux |
| Hsla | hsla(200,80%,50%,0.5) | Effets de lueur basés sur la teinte |
Hex fonctionne bien quand une ombre doit rester complètement opaque, comme une ombre portée dure derrière un titre.
Rgba ajoute un canal alpha, et c'est ce qui permet à une ombre de s'estomper dans l'arrière-plan au lieu de rester là comme un bloc plat de couleur.
La commutation entre les deux est un travail en une étape avec un convertisseur de RGB en HEX chaque fois qu'un système de conception vous donne un échantillon hex et que le générateur veut rgba.
Hsla se comporte comme rgba mais expose directement la teinte et la saturation, ce qui accélère le travail au néon ou à la lueur puisque vous glissez sur une roue chromatique plutôt que de rechercher des échantillons fixes.
Extraire une valeur d'une palette basée sur hsl signifie parfois la faire passer d'abord par un convertisseur hsl en rgb.
Le canal alpha fait le vrai travail ici. Une ombre à pleine opacité se lit plate et un peu artificielle à côté de la même ombre abaissée à 10 ou 20% de transparence.
CSS Text-Shadow vs Box-Shadow vs le filtre Drop-Shadow : Quelle est la différence ?
Ombre de texte ombre les contours du glyphe du texte lui-même. Box-shadow ombrage la boîte de l'élément, le rectangle qui l'entoure.
La fonction filtre d'ombre portée (EN), définie dans le Module d'effets de filtre CSS (EN), suit la forme alpha réelle de tout ce à quoi elle est appliquée, y compris le texte.
| Propriété | S'applique à | Layering | Coût |
|---|---|---|---|
| Ombre | Glyph outlines | Séparé par des virgules, natif | Faible |
| box-shadow | Boîte à éléments | Séparé par des virgules, natif | Faible à modéré |
| drop-shadow() | Forme alpha (image, SVG, texte) | Une ombre par appel de filtre | Plus élevé, dépendant du GPU |
Box-shadow ignore entièrement le texte et ombre la boîte environnante, ce n'est donc pas le bon outil au moment où l'objectif est d'ombrer des formes de lettres individuelles. Ce travail appartient à un générateur d'ombres de boîte dédié.
L'ombre portée peut envelopper plusieurs éléments ou une image entière et toujours tracer la forme réelle à l'intérieur, quelque chose que ni l'ombre de texte ni l'ombre de boîte ne peuvent faire.
Le compromis est le coût du rendu. L'ombre portée a tendance à être plus lourde que l'ombre du texte, car le navigateur doit calculer la forme réelle au lieu de simplement la boîte ou les contours des caractères.
Quels navigateurs prennent en charge Text-Shadow, et quelles sont les limites de compatibilité ?
La prise en charge de l'ombre de texte dans les navigateurs modernes est effectivement universelle à ce stade.
Chiffres clés, par Can I Use (EN) :
- Prise en charge complète sur Chrome, Firefox, Edge et Safari dans toutes les versions actuelles
- Prise en charge d'Internet Explorer limitée aux versions 10 et 11, sans prise en charge dans IE 5.5 à 9
- Opera Mini ignore entièrement la valeur du rayon de flou, donc les ombres s'affichent sans aucun flou
Les lacunes qui subsistent se situent presque entièrement dans les anciens logiciels. Quiconque construit contre une liste de navigateur courante est peu susceptible de rencontrer un mur de rendu.
Vérifier le trafic réel d'un projet par rapport aux données de compatibilité entre les navigateurs (EN) vaut toujours la peine de cinq minutes avant d'envoyer des couches d'ombre lourdes. Cela vaut doublement pour une page marketing publique plutôt qu’un outil interne.
Chrome DevTools facilite la vérification à l'avance. Ouvrez l'inspecteur de style et ajustez les valeurs d'ombre en direct par rapport à la page rendue réelle.
Quels sont les avantages et les inconvénients de l'utilisation d'un générateur d'ombre de texte au lieu d'écrire CSS à la main ?
Un générateur gagne sur la vitesse. Tapez la même syntaxe en quatre parties à partir de la mémoire, puis regardez le flou et le décalage jusqu'à ce qu'il soit correct, cela prend plus de temps que de faire glisser trois curseurs.
Les avantages du générateur :
- Rétroaction visuelle instantanée au lieu d'une boucle enregistrement-actualisation-vérification
- Pas besoin de mémoriser l'ordre de décalage-x, décalage-y, flou-rayon
- Des effets superposés tels que la lueur, le néon ou la 3D s'unissent sans essais et erreurs
Les inconvénients du générateur :
- Des valeurs copiées-collées sans réelle compréhension de ce que fait chaque nombre
- Le code généré peut contenir des couches supplémentaires dont une valeur manuscrite n'aurait pas besoin
- Ne vous apprend pas quand text-shadow est en fait la mauvaise propriété à atteindre
Le codage manuel l’emporte dans un cas précis : une ombre unique et simple sur un titre. Taper text-shadow: 1px 1px 2px #000; prend moins de temps que d'ouvrir un onglet de navigateur.
Le véritable avantage d'un générateur apparaît une fois qu'une conception nécessite trois ou quatre ombres empilées, où le réglage manuel de chaque décalage par essais et erreurs devient fastidieux rapidement.
Cet avantage de vitesse est vraiment un gain de convivialité (EN) plus qu'un gain de codage. L'outil élimine la friction d'une tâche qui n'a jamais été techniquement difficile, juste délicate.
Comment utiliser un générateur d'ombre de texte CSS, étape par étape ?
Chaque générateur suit à peu près le même flux de travail, quel que soit celui que vous ouvrez.
- Tapez ou collez l'exemple de texte dans la zone d'aperçu
- Définissez le décalage horizontal et vertical avec les curseurs
- Ajustez le rayon de flou jusqu'à ce que la douceur des bords soit correcte
- Choisissez une couleur d'ombre, en la comparant à l'arrière-plan de la page
- Ajouter un deuxième ou troisième calque d'ombre si l'effet a besoin de profondeur ou de lueur
- Copiez le fragment de code CSS généré et collez-le dans votre feuille de style
Une étape est ignorée plus que toute autre : vérifier l'aperçu par rapport à votre vraie couleur d'arrière-plan, et non à la toile blanche par défaut du générateur.
Une ombre qui semble nette sur blanc peut disparaître complètement sur une image de héros sombre ou un arrière-plan de section coloré.
Collez le résultat dans une feuille de style externe ou dans un partiel Sass si votre projet en utilise déjà une, plutôt que dans un style en ligne chaque fois que le même effet se répète sur une page.
Il est plus facile d'ajuster une règle plus tard que de chasser cinq copies en ligne éparpillées dans un modèle.
Comment créez-vous des effets d'ombre de texte spécifiques (lueur, néon, 3D, relief) ?
La même syntaxe en quatre parties produit des résultats très différents en fonction de la façon dont le décalage, le flou et la couleur sont combinés.
Effet de néon
Neon text superpose trois ou quatre ombres à décalage zéro, en montant le rayon de flou à chaque fois.
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 15px #0ff,
0 0 30px #0ff;La couleur du texte est généralement proche du blanc ici, de sorte que la lueur se lit comme de la lumière qui se répand vers l'extérieur plutôt que comme un contour coloré.
Effet en 3D
Le décalage en couches crée un aspect 3D : une ombre répétée plusieurs fois, augmentant d'un pixel à chaque répétition, la couleur restant plate.
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;La taille de la police est importante ici.
Une fine police de caractères se brise sous ces nombreuses couches empilées. Un poids gras ou noir maintient la forme.
Effet de relief
Emboss utilise exactement deux ombres au lieu d'une pile : une ombre claire décalée en haut à gauche, une ombre sombre décalée en bas à droite.
| Couche | Offset | Couleur |
|---|---|---|
| Highlight | -1px -1px 0 | Gris clair ou blanc |
| Shadow | 1px 1px 0 | Gris foncé ou noir |
color: #888;
text-shadow:
-1px -1px 0 #fff,
1px 1px 0 #333;Cet appariement est la même logique clair-obscur derrière le neumorphisme (EN) design, juste appliqué au texte au lieu d'un panneau d'interface utilisateur.
Il ne se lit correctement que sur un fond de tons moyens. Sur du blanc pur ou du noir pur, l'une des deux couches disparaît entièrement.
L'ombre du texte peut-elle être animée en survol ou en transition ?
L'ombre du texte peut être modifiée lors de la survolée, et les navigateurs animent la couleur et le rayon de flou en douceur entre deux états.
Le piège, c’est la performance. L'ombre de texte déclenche une repeinte sur chaque image qu'elle modifie, puisque le navigateur doit recalculer les pixels flous plutôt que de simplement repositionner un calque.
La décomposition largement citée de Tobias Ahlin (EN) sur l'animation des ombres a trouvé que le même coût de repeinture s'applique à l'ombre de boîte, et l'ombre de texte partage le même chemin de rendu.
Propriétés qui évitent ce coût :
- opacité
- transform
Les deux sont accélérés matériellement et ne déclenchent que le compositing, pas un repeintage complet.
Une solution de contournement courante consiste à maintenir l’ombre fixe et à modifier l’opacité de l’élément qui la porte, de sorte qu’elle s’estompe sans être repeinte à chaque image.
Sur un seul en-tête ou bouton ce coût est invisible. Sur une page animant des ombres sur une longue liste ou une grille de cartes, c'est la différence entre une interaction fluide et un jamming visible sur les appareils moins puissants.
Le mouvement plus large au niveau des lettres, le genre qui va au-delà d'un simple état de survol, est vraiment une catégorie à part entière. Il est plus proche de css text animations (EN) que d'un effet d'ombre statique.
Quand Text-Shadow ne fonctionne-t-il pas ou échoue-t-il ?
Text-shadow échoue tranquillement dans quelques situations spécifiques et bien documentées plutôt que de générer une erreur.
Mode couleurs forcées : Windows Haut Contraste et les paramètres similaires au niveau du système forcent l'ombre du texte à aucun. La requête média forced-colors (EN) qui détecte cela a été la nouvelle base disponible depuis septembre 2022 et largement disponible depuis mars 2025, selon MDN.
La palette choisie par l'utilisateur l'emporte, et combattre cette victoire avec plus de CSS va à l'encontre de l'objectif du paramètre d'accessibilité en premier lieu.
Feuilles de style d'impression : la plupart des styles d'impression de production, y compris le motif popularisé par HTML5 Boilerplate (EN), suppriment les ombres de texte et les ombres de boîte avec une règle de remplacement générale avant que la page n'atteigne le papier.
L'encre ne rend pas le flou comme un écran le fait, donc l'ombre serait juste imprimée comme une tache derrière les lettres.
Faible lisibilité du contraste : une couleur d'ombre trop proche de l'arrière-plan engloutit l'effet, et parfois le texte avec lui.
Le WebAIM Million (EN) a trouvé 83,9% des pages d'accueil signalées pour un texte à faible contraste en 2026, contre 79,1% en 2025. Une couleur d'ombre mal choisie est une autre façon que le nombre monte plutôt que de tomber.
WCAG 2.1 (EN) définit un rapport contraste de couleur (EN) minimum de 4,5 :1 pour le texte normal. Une ombre qui réduit le contraste peut pousser du texte conforme en dessous de cette ligne.
Rien de tout cela ne signifie éviter l'ombre de texte. Cela signifie qu'il doit être traité comme une décoration superposée au-dessus du texte lisible, conformément aux pratiques de base en matière d'accessibilité web (EN), et non comme un remplacement.
Quelles erreurs courantes cassent la sortie d'ombre de texte générée ?
La plupart des sorties d'un générateur d'ombre de texte échouent pour l'une des trois raisons prévisibles, pas pour quelque chose d'exotique.
| Erreur | Ce qui se passe | Fix |
|---|---|---|
| Rayon de flou trop élevé | Les lettres se dissolvent dans un brouillard | Réduire le flou à 20-30% de la taille de la police |
| Valeurs de décalage manquantes | L'ombre est invisible derrière le texte | Ajouter au moins 1px sur l'un des axes |
| Copie partielle d'une valeur en couches | Un seul calque d'ombre est rendu | Copier la chaîne complète séparée par des virgules |
Un flou trop élevé est le problème le plus courant. Un rayon supérieur à environ un tiers de la taille de la police cesse de se lire sous forme d'ombre et commence à se lire sous forme de brouillard derrière les lettres.
La réduction à 20 à 30 % de la taille de la police restaure généralement la forme sans perdre la douceur.
Offset-x et offset-y tous deux à zéro, sans flou, produisent une ombre directement derrière le texte où les lettres le cachent complètement.
Il semble que la propriété n'a rien fait. En réalité, l'ombre est rendue exactement comme écrit, juste empilée là où rien ne se voit.
La troisième erreur se produit dans le presse-papiers, pas dans le code. Les valeurs multi-calques sont de longues chaînes de caractères séparées par des virgules, et la copie d'une seule partie d'un calque supprime tous les calques après le découpage.
Collez la chaîne complète dans l'aperçu du générateur avant de l'envoyer. Cela est particulièrement important lorsque la valeur est arrivée par le biais d’un message de chat ou d’un document de transfert de conception plutôt que d’une copie directe de l’outil.
Questions fréquentes : Générateur de text-shadow CSS
Quel est le nombre maximum de calques d'ombre qu'un navigateur peut afficher ?
Les navigateurs placent no hard caps sur le nombre d'ombres séparées par des virgules dans une valeur text-shadow.
Le vrai plafond est pratique : le coût de la peinture augmente avec chaque couche, et la plupart des générateurs le plafonnent autour de huit à dix.
Text-Shadow prend-il en charge la transparence alpha dans tous les navigateurs ?
Oui, oui. Chaque navigateur qui supporte text-shadow supporte également les valeurs rgba et hsla à l'intérieur, puisque la transparence alpha fait partie de la même syntaxe de couleur.
La seule exception est Internet Explorer 9 et les versions antérieures, qui n'ont jamais pris en charge la propriété.
L'ombre de texte peut-elle être appliquée aux images d'arrière-plan ou seulement au texte ?
Text-shadow n'ombre que les glyphes des nœuds de texte réels.
Il n'a aucun effet sur les images d'arrière-plan, les formes SVG ou la boîte d'un élément.
L'ombrage d'une image d'arrière-plan appelle le filtre ombre portée à la place, qui suit la forme alpha réelle de l'image plutôt qu'une boîte de délimitation.
L'ombre de texte affecte-t-elle les performances de la page ou le référencement ?
Le rendu d'une ombre de texte statique ne coûte presque rien et n'a aucun impact direct sur le référencement, puisque les moteurs de recherche n'analysent pas le CSS décoratif comme du contenu.
La lisibilité compte davantage. Une ombre qui réduit le contraste peut nuire à l'engagement, ce qui est un problème d'utilisabilité et non un facteur de classement.
Les valeurs générées peuvent-elles être réutilisées comme un Sass Mixin ou une classe utilitaire Tailwind ou Bootstrap ?
Oui. Une valeur d'ombre de texte générée est déposée dans un mixin Sass en tant que variable ou dans une classe utilitaire Tailwind (EN) personnalisée dans le fichier de configuration.
Bootstrap (EN) est livré sans utilitaire text-shadow, les projets dessus nécessitent donc une petite classe personnalisée.
Que devriez-vous vérifier avant d'expédier un effet de générateur d'ombre de texte CSS ?
Un effet de générateur d'ombre de texte CSS est prêt à être expédié une fois que son rendu, son contraste et son comportement de mouvement ont été vérifiés par rapport à l'arrière-plan réel de la page.
Trois vérifications décident de la préparation, dans l'ordre :
- Contraste avec le fond réel
- Couleurs forcées et impression de secours
- Rendu sur tous les navigateurs utilisés par votre trafic
Sauter l'ordre a moins d'importance que sauter une étape, puisqu'une ombre qui échoue au contraste échoue généralement aux deux autres contrôles.
Une condition modifie ce conseil : une lueur animée ou une impulsion construite sur la valeur de l'ombre ignore un signal d'accessibilité réel sans recours au mouvement.
prefers-reduced-motion (EN) est pris en charge dans tous les principaux navigateurs depuis janvier 2020 et Baseline Widely Available depuis juillet 2022, selon MDN. Animer une ombre de texte sans la vérifier échange une démo flashy pour une expérience brisée sur une part des visiteurs.
Le texte assis sur un panneau translucide a besoin de la même discipline de contraste, qui est le point de départ pour un générateur de morphisme de verre css.