Générateur d'ombre de texte CSS

Créer un text-shadow CSS avec des curseurs et voir un aperçu de texte en direct

Qu'est-ce que c'est et comment ça marche ?

CSS text-shadow ajoute une ou plusieurs ombres portées à du texte, définies par décalage horizontal, vertical, rayon de flou et couleur. Une seule ombre bien réglée fait ressortir les titres sur une image de fond ; superposer plusieurs ombres crée des effets de lueur néon, letterpress, longue ombre ou extrusion 3D — purement en CSS.

Ce générateur offre un aperçu en direct avec des contrôles pour chaque couche d'ombre. La sortie est une déclaration CSS text-shadow prête à coller.

Cas d'usage

• Lisibilité sur les images : ajoutez une ombre sombre douce (0px 1px 3px rgba(0,0,0,0.6)) au texte blanc d'un hero sur fond photo variable.
• Lueur néon : superposez trois ombres dans la même teinte avec des rayons de flou croissants (0 0 5px, 0 0 15px, 0 0 30px).
• Letterpress/gaufré : combinez une ombre claire en bas-droite et une sombre en haut-gauche pour que le texte semble pressé dans la surface.

Questions fréquentes

Quel est l'ordre des valeurs dans text-shadow ?

text-shadow: offset-x offset-y blur-radius color. Le blur-radius est optionnel (0 par défaut = bord net).

Puis-je utiliser text-shadow sans flou pour des ombres nettes ?

Oui. Un blur-radius à 0 donne une ombre à bord net — base des effets longue ombre et rétro 8-bit.

text-shadow fonctionne-t-il sur les pseudo-éléments ::before et ::after ?

Oui — text-shadow s'applique au contenu textuel des pseudo-éléments comme au vrai texte.

text-shadow est-il identique à box-shadow ?

Non. text-shadow ne s'applique qu'aux glyphes du texte ; box-shadow à toute la boîte. text-shadow ne supporte pas le mot-clé inset.

CSS

Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'animations CSS · Générateur de filtres CSS