Générateur d' Ombre de Texte CSS
Créez des effets d'ombre de texte multicouches visuellement avec aperçu en direct.
① Réglez décalage et flou par couche ② Ajoutez plusieurs couches d'ombre ③ Copiez le CSS
Préréglages:
Ombre 1
2px
2px
4px
30%
Code CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Qu'est-ce que CSS text-shadow ?
La propriété CSS text-shadow ajoute une ou plusieurs ombres au texte. Chaque ombre est définie par un décalage X, Y, un rayon de flou et une couleur — ex. text-shadow: 2px 2px 4px rgba(0,0,0,0.5). Plusieurs couches séparées par des virgules permettent des effets complexes comme le glow et l'effet neon.
Questions Fréquentes
CSS text-shadow ajoute des effets d'ombre au texte. Chaque ombre nécessite un décalage X, Y, un rayon de flou et une couleur. Plusieurs ombres séparées par des virgules créent des effets en couches.
Oui. CSS text-shadow accepte une liste d'ombres séparées par des virgules. Chaque ombre est appliquée dans l'ordre, la première apparaissant en haut.
Le rayon de flou contrôle à quel point l'ombre est diffuse. Une valeur de 0 donne une ombre nette. Des valeurs plus grandes créent des ombres plus douces.
Utilisez quatre ombres avec flou 0, chacune décalée dans une direction : text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black.
Empilez plusieurs ombres avec des décalages X et Y croissants de la même couleur : text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa.
Text-shadow est accéléré par GPU dans les navigateurs modernes. De grands rayons de flou sur de longs textes peuvent affecter les performances sur les appareils bas de gamme.
CSS text-shadow est supporté par tous les navigateurs modernes depuis 2010. Aucun préfixe fournisseur n'est nécessaire.