Générateur d'ombre de texte CSS : Créez des ombres de texte visuellement
Besoin de profondeur, de contour ou de lueur sur les titres et le texte ? Le CSS Text Shadow Generator vous permet de créer visuellement des valeurs text-shadow : définissez le décalage, le flou et la couleur pour chaque ombre, ajoutez plusieurs ombres et copiez le CSS d'un simple clic.
Exemple : Choisissez le préréglage "Soft" pour une ombre portée subtile, ou "Glow" pour un flou sans décalage. Utilisez "Outline" pour un effet de contour net, ou "Layered" pour une ombre plus réaliste. Changez le texte d'aperçu et les couleurs pour voir l'effet sur votre copie. Copiez le CSS et collez-le dans votre feuille de style.
Qu'est-ce que text-shadow ?
text-shadow est une propriété CSS qui dessine une ou plusieurs ombres derrière le texte. Vous définissez le décalage horizontal et vertical, le rayon de flou et la couleur. Contrairement à box-shadow, text-shadow n'a pas de propagation ni d'inset — juste le décalage, le flou et la couleur. Plusieurs ombres sont séparées par des virgules et s'empilent dans l'ordre.
Pourquoi utiliser un générateur d'ombres de texte ?
Retour visuel — Voir l'ombre sur le texte d'exemple (et votre propre texte d'aperçu) avant de copier le code.
Ombres multiples — Ajoutez plusieurs ombres pour une profondeur superposée ou combinez contour et lueur dans une seule déclaration.
Préréglages — Commencez par Aucun, Soft, Medium, Hard, Outline, Glow ou Layered et ajustez à partir de là.
Contrôles d'aperçu — Éditez le texte d'aperçu et les couleurs de texte/fond pour tester la lisibilité et le contraste.
Pas d'inscription — Gratuit, côté client, et fonctionne hors ligne une fois la page chargée.
Comment fonctionne l'outil
- Utilisez l'aperçu pour voir l'ombre de texte actuelle sur le texte d'exemple (modifiez le texte et les couleurs si vous le souhaitez).
- Éditez chaque ombre : décalage X/Y, flou et couleur (sélecteur ou hex/rgba, y compris la transparence).
- Ajoutez ou supprimez des ombres pour créer des effets superposés ou combinés.
- Copiez le CSS à partir de la sortie et collez-le dans votre projet.
- Essayez les préréglages (par exemple, Glow, Outline, Layered) pour démarrer un style.
Syntaxe : text-shadow: offset-x offset-y blur-radius color; Plusieurs ombres sont séparées par des virgules.
Cas d'utilisation
Titres et en-têtes — Ombre douce pour la profondeur ou la lisibilité sur des arrière-plans chargés.
Effet de contour — Petit décalage sans flou (ou plusieurs ombres) pour suggérer un contour.
Lueur — Zéro décalage avec un grand flou et une couleur semi-transparente.
Profondeur superposée — Plusieurs ombres pour une ombre portée plus réaliste.
Questions Fréquemment Posées
En quoi text-shadow est-il différent de box-shadow ?
text-shadow s'applique uniquement au texte et n'a pas de propagation ni d'inset — seulement offset-x, offset-y, flou et couleur. box-shadow s'applique à la boîte de l'élément et prend en charge la propagation et l'inset. Utilisez text-shadow pour des effets typographiques et box-shadow pour des conteneurs et des cartes.
Puis-je utiliser plusieurs ombres ?
Oui. Ajoutez plus d'ombres avec "Add shadow." Elles s'empilent dans l'ordre ; la première est au-dessus. Utilisez plusieurs ombres pour une profondeur superposée ou pour combiner contour et lueur.
Essayez le CSS Text Shadow Generator
CSS Text Shadow Generator
Generate CSS text-shadow values visually. Set offset, blur, and color. Add multiple shadows and copy the CSS instantly.
The CSS Text Shadow Generator is free, works in your browser, and requires no sign-up. Set offset, blur, and color, add multiple shadows if you like, and copy the CSS with one click — perfect for headings, outlines, and glow effects.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values for cards and panels
- CSS Border Radius Generator — Create border-radius values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Font Pairing — Preview and test typography combinations