Comment générer une ombre de texte CSS

Saisissez les décalages, le flou et la couleur dans les champs prévus, puis générez la déclaration text-shadow. Les valeurs numériques apparaissent avec px et la déclaration se termine par un point-virgule.

Préparer une ombre de texte CSS

Une ombre portée sur un texte CSS se décrit avec quatre éléments : le décalage horizontal, le décalage vertical, le flou et la couleur. Cet outil génère la déclaration text-shadow à partir de ces paramètres, ce qui permet de préparer une valeur à intégrer dans une feuille de style sans composer la syntaxe à la main.

Utilisez les champs numériques pour régler la position et la diffusion de l’ombre. Le champ de couleur accepte du texte. Si vous ne renseignez pas un paramètre, une valeur par défaut est utilisée : 1 pour le décalage horizontal, 1 pour le décalage vertical, 2 pour le flou et #00000033 pour la couleur.

Générer la déclaration pas à pas

1. Ouvrez l’outil de génération d’ombre de texte CSS.
2. Saisissez un nombre pour le décalage horizontal. Une valeur positive déplace l’ombre vers la droite, tandis qu’une valeur négative la déplace vers la gauche.
3. Saisissez un nombre pour le décalage vertical. Une valeur positive la place vers le bas et une valeur négative vers le haut.
4. Indiquez un nombre pour le flou, puis renseignez la couleur sous forme de texte.
5. Laissez un champ de côté si la valeur par défaut vous convient. Vous pouvez aussi saisir 0 pour les deux décalages ou pour le flou.
6. Lancez la génération et consultez la déclaration CSS produite. Les trois valeurs numériques sont écrites avec l’unité px, et la déclaration se termine par un point-virgule.

Pour une ombre nette, choisissez un flou nul. Pour une ombre plus diffuse, augmentez le flou. Les décalages peuvent être combinés, par exemple avec une valeur horizontale positive et une valeur verticale négative.

Lire et contrôler le résultat

Le résultat attendu est une déclaration CSS text-shadow composée des quatre paramètres. Vérifiez que les nombres apparaissent avec px, que la couleur figure à la fin de la valeur et qu’un point-virgule clôt la déclaration. Une valeur omise n’est pas affichée comme un champ séparé : elle est remplacée par sa valeur par défaut dans le résultat.

Le générateur produit la déclaration à partir des entrées fournies, mais les informations disponibles ne précisent pas de règles supplémentaires de validation, d’arrondi, de plage autorisée ou de normalisation des couleurs. Contrôlez donc le format de vos valeurs avant d’intégrer la déclaration dans votre CSS. Les valeurs nulles pour les décalages et le flou peuvent donner une ombre centrée ou non floutée, selon les autres paramètres choisis.

Exemple pratique

Vous voulez placer une ombre légèrement vers la droite et vers le haut, avec un flou modéré et une couleur personnalisée.

Saisissez 4 comme décalage horizontal, -2 comme décalage vertical, 6 comme flou et #33333399 comme couleur, puis générez la déclaration.

La sortie prend la forme text-shadow: 4px -2px 6px #33333399;, avec les trois nombres suivis de px et un point-virgule final.

Limites

• Les informations disponibles décrivent la génération et le formatage direct de la déclaration, mais ne précisent pas de règles de validation, d’arrondi, de plage ou de normalisation des couleurs.

Erreurs fréquentes

• Une erreur fréquente consiste à ajouter manuellement px dans les champs numériques. Saisissez seulement les nombres pour les décalages et le flou : l’unité px est ajoutée dans la déclaration générée.

Questions fréquentes

Puis-je utiliser zéro pour le décalage ou le flou ?

Oui, 0 est accepté pour les deux décalages et pour le flou. Le résultat conserve alors ces valeurs avec l’unité px.

Quelles valeurs sont utilisées lorsqu’un champ est omis ?

Si vous omettez le décalage horizontal, le décalage vertical, le flou ou la couleur, l’outil utilise respectivement 1, 1, 2 et #00000033.

Quels types de valeurs puis-je saisir ?

Les décalages et le flou acceptent des nombres, tandis que la couleur accepte du texte. La déclaration générée écrit les valeurs numériques avec px.