Générateur de text-shadow CSS

Ajoutez la propriété CSS text-shadow à n'importe quel élément de texte. La forme abrégée est text-shadow: offset-x offset-y blur-radius color — par exemple text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) projette une ombre douce 2px à droite et 2px vers le bas avec un flou de 4px.

text-shadow est la propriété CSS qui peint une ou plusieurs ombres derrière le texte d'un élément. Chaque ombre prend jusqu'à quatre valeurs : un décalage horizontal (X), un décalage vertical (Y), un rayon de flou optionnel et une couleur — écrit comme text-shadow: 1px 1px 2px #000000.

Pour le texte, utilisez text-shadow sur la règle de l'élément, ex. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Pour les boîtes, cartes et boutons, utilisez box-shadow. text-shadow suit la forme des lettres tandis que box-shadow suit la boîte rectangulaire de l'élément.

Dans un outil de design comme Figma, Sketch ou Photoshop, ajoutez un effet Drop Shadow à un calque de texte et définissez le décalage X/Y, le flou et la couleur. Ces quatre valeurs correspondent presque directement au CSS : une ombre Figma de X 2, Y 2, Blur 4, noir 40% devient text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).

Un éclat néon est composé de plusieurs ombres de la même couleur vive empilées avec un décalage zéro et un flou croissant. Par exemple : text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; sur du texte blanc sur fond sombre. Chargez le préréglage Néon ici pour l'obtenir instantanément.

Les deux effets utilisent plusieurs ombres avec décalage mais sans flou. Pour du texte 3D extrudé, empilez des couches qui descendent et vont à droite dans une couleur progressivement plus sombre. Les préréglages 3D et Longue ombre construisent ces piles de couches pour vous.

Placez quatre (ou huit) ombres dures autour du texte, une dans chaque direction, avec un flou de 0. Par exemple : text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; donne au texte blanc un contour sombre fin.

Séparez-les par des virgules dans une seule déclaration text-shadow : text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. Le navigateur les peint dans l'ordre, avec la première ombre au-dessus. C'est ainsi que sont construits les effets néon, 3D, feu et contour.

Non. Contrairement à box-shadow, la propriété text-shadow n'a pas de mot-clé inset ni de rayon de diffusion. Pour simuler un aspect gravé sur fond clair, ajoutez une ombre claire subtile juste sous du texte gris foncé, ex. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. Le préréglage Letterpress illustre exactement cette astuce.

Tailwind CSS v4 inclut des utilitaires natifs d'ombre de texte (text-shadow-sm, text-shadow-md, text-shadow-lg). Pour une valeur personnalisée, utilisez une propriété arbitraire où les espaces deviennent des underscores : class="[text-shadow:2px_2px_4px_#00000066]".

Non. text-shadow est entièrement standardisé et pris en charge sans préfixe dans tous les navigateurs actuels, donc un simple text-shadow: 1px 1px 2px #000; est tout ce dont vous avez besoin.

text-shadow projette une ombre à partir de la forme des glyphes (les lettres elles-mêmes), tandis que box-shadow projette une ombre à partir de la boîte rectangulaire d'un élément. text-shadow n'a ni rayon de diffusion ni option inset ; box-shadow a les deux.

Utilisez une ombre sombre douce à faible opacité avec un petit décalage et quelques pixels de flou — par exemple text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Cela soulève le texte blanc ou clair d'un fond photo ou dégradé et améliore le contraste.

CSSmatic a une section d'ombre de texte, mais ne gère qu'une seule couche — vous ne pouvez pas empiler plusieurs ombres pour des effets néon, 3D ou de contour sans modifier le code manuellement. UtiloKit est le seul outil gratuit qui combine l'empilement multicouches, des préréglages nommés, un aperçu en direct et une exportation en un clic en CSS, Tailwind et React Native.

Cliquez sur Copier CSS pour une déclaration prête à coller, Copier Tailwind pour la classe de valeur arbitraire, ou Copier React Native pour l'équivalent textShadowColor / textShadowOffset / textShadowRadius. Utilisez Partager le lien pour sauvegarder les paramètres exacts dans l'URL. Tout est gratuit sans inscription, fonctionne localement et continue hors ligne.