Créez des ombres de texte CSS en plusieurs couches avec un aperçu en direct. Partez des préréglages néon, 3D, ombre longue, letterpress ou contour, puis copiez le CSS ou une classe Tailwind.
Générateur de text-shadow CSS
La propriété CSS text-shadow prend un décalage x, un décalage y, un rayon de flou facultatif et une couleur, par exemple text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Séparez plusieurs ombres par des virgules pour les empiler, c'est ainsi que l'on crée les halos néon et le lettrage 3D. Créez-en une ci-dessous et copiez le CSS ou la classe Tailwind.
Les quatre valeurs d'une ombre
Valeur
Exemple
Effet
décalage x
Déplace l'ombre vers la droite (négatif : vers la gauche)
décalage y
Déplace l'ombre vers le bas (négatif : vers le haut)
rayon de flou
Adoucit le bord ; 0 donne une copie nette
rgb(0 0 0 / 0.25)
N'importe quelle couleur CSS ; par défaut, la couleur du texte
Empilez autant de couches que vous voulez, changez le texte, la taille de police et les couleurs, et regardez l'aperçu se mettre à jour. Le résultat est du CSS simple qui fonctionne dans tous les navigateurs actuels, plus une classe Tailwind pour les projets qui l'utilisent.
Choisissez un préréglage ou partez d'une seule ombre douce.
Modifiez les décalages, le flou, la couleur et l'opacité de chaque couche, ou ajoutez et supprimez des couches. Les couches listées en premier sont dessinées au-dessus.
Changez le texte d'aperçu, la taille, la graisse et les couleurs pour correspondre à votre design.
Copiez la déclaration CSS ou la classe Tailwind à propriété arbitraire.
Les ombres ne comptent pas dans les vérifications de contraste. Assurez-vous que le texte est conforme sur son fond sans l'ombre, puis ajoutez l'ombre comme touche finale.
Pour un texte blanc sur une photo chargée, une ombre sombre et douce aide plus la lisibilité qu'une ombre nette. Associez-la à un voile sombre sur l'image pour une vraie lisibilité.
De grands rayons de flou sur de nombreuses couches coûtent du temps d'affichage, et les animer coûte encore plus. Réservez les halos lourds aux titres, pas au texte courant.
Une ombre claire de 1px sous un texte gris sur fond gris donne l'effet letterpress en creux ; inversez le décalage pour un texte en relief.
Questions fréquentes
Comment créer un texte néon en CSS ?
Utilisez un texte clair avec plusieurs ombres de la même couleur vive, sans décalage et avec un flou croissant : un halo blanc serré, puis des halos de 12px, 24px et 48px dans la couleur d'accent. Placez-le sur un fond sombre. Le préréglage Néon est un bon point de départ.
text-shadow prend-il en charge le spread comme box-shadow ?
Non. text-shadow n'a ni valeur de spread ni mot-clé inset. Pour simuler un contour plus épais, empilez plusieurs ombres nettes décalées d'un pixel dans chaque direction, comme le fait le préréglage Contour, ou utilisez -webkit-text-stroke.
Comment ajouter une ombre de texte dans Tailwind ?
Tailwind 4.1 et versions ultérieures incluent des utilitaires text-shadow comme text-shadow-sm et text-shadow-lg. Pour une ombre personnalisée dans n'importe quelle version, utilisez une propriété arbitraire comme [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], où les underscores remplacent les espaces. Le générateur écrit cette classe pour vous.
Pourquoi mon ombre est-elle différente dans Safari ?
Les navigateurs rastérisent le flou de façon légèrement différente, donc les grands flous peuvent paraître plus doux ou plus forts d'un moteur à l'autre. Les ombres nettes sans flou sont identiques partout.
Comment fonctionne l'empilement
Chaque ombre séparée par une virgule est dessinée derrière le texte, et la première de la liste se retrouve au-dessus des autres. Cet ordre compte pour les effets 3D : listez d'abord la couche la plus proche et la plus claire, et en dernier la plus éloignée et la plus sombre.
Les ombres longues ne sont que de nombreuses couches identiques décalées d'un pixel à la fois. Elles font de l'effet sur un grand titre, mais chaque couche est un dessin de plus, donc gardez un nombre d'étapes raisonnable.
Accessibilité et animation
Les ombres peuvent rendre flou un petit texte et le rendre plus difficile à lire pour les personnes malvoyantes. Réservez les effets décoratifs aux grands titres et gardez le texte courant net.
Si vous animez un halo, placez l'animation dans une vérification prefers-reduced-motion pour que les personnes qui ont demandé moins d'animations obtiennent une version fixe.