Ombre de texte CSS
Composez des ombres de texte multi-couches avec aperçu live et CSS prêt à copier.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Des ombres de texte sur mesure
Réglez le décalage, le flou, la couleur et l’opacité, ajoutez une seconde couche, et obtenez la propriété text-shadow avec un aperçu en direct sur le texte.
-
Réglez la couche 1
X, Y, flou, couleur, opacité.
-
Activez la couche 2
Pour un contour ou une lueur.
-
Copiez le CSS
Une seule propriété, prête à coller.
Anatomie de la propriété
| Partie | Exemple | Rôle |
|---|---|---|
| Décalage X | 2px | Horizontal (négatif = gauche) |
| Décalage Y | 2px | Vertical (négatif = haut) |
| Flou | 4px | Diffusion de l’ombre |
| Couleur | rgba(124, 58, 237, 0.5) | Teinte et opacité |
Couche par défaut : text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5);. Aperçu et calcul 100 % locaux.
Questions fréquentes
Comment fonctionne text-shadow ?
La propriété prend, dans l’ordre : décalage horizontal X, décalage vertical Y, rayon de flou, puis la couleur. Exemple : text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5). Des valeurs négatives décalent vers la gauche/haut.
Peut-on superposer plusieurs ombres ?
Oui, en les séparant par des virgules. Cet outil permet deux couches : la première dessine l’ombre principale, la seconde (optionnelle) ajoute un contour ou une lueur d’une autre couleur.
Comment créer un effet de lueur (glow) ?
Mettez X et Y à 0, augmentez le flou et choisissez une couleur vive avec une bonne opacité. La lumière se diffuse uniformément autour du texte. Dupliquez la couche pour intensifier.
L’ombre nuit-elle à la lisibilité ?
Une ombre trop marquée peut gêner. Pour du texte courant, gardez un flou léger et une opacité modérée ; réservez les effets prononcés aux gros titres. L’aperçu vous aide à juger.