Générateur d'ombre de texte
Construisez une ombre de texte CSS et voyez-la sur clair et sur sombre à la fois. Copiez la déclaration quand le rendu vous convient.
Cet outil vous a-t-il été utile ?
À quoi sert cet outil
Déplacez l'ombre, floutez-la, colorez-la, et lisez le CSS au fur et à mesure. L'aperçu montre les mêmes lettres sur un fond clair et sur un fond sombre, côte à côte, parce qu'une ombre réglée sur du blanc disparaît très souvent complètement sur du sombre, et n'en voir qu'un des deux est précisément la façon dont cela finit en production. Les plages sont volontairement plus serrées que pour les ombres de boîte : une ombre de texte se juge contre des lettres, où quelques pixels de trop cessent de se lire comme de la profondeur et commencent à se lire comme un second mot flou. Quand le rendu vous convient, copiez la déclaration et collez-la.
À quoi ça vous sert
- Détacher un titre d'une photo ou d'un fond chargé pour qu'il reste lisible.
- Donner un peu de profondeur à un titre de bannière sans passer par une image.
- Construire une ombre dure et décalée pour un rendu rétro ou affiche.
- Vérifier que l'ombre tient encore quand votre site passe en mode sombre.
Comment l'utiliser
- Réglez le décalage horizontal et vertical pour placer l'ombre.
- Ajoutez du flou pour une ombre douce, ou laissez à zéro pour un bord net.
- Choisissez la couleur et baissez l'opacité jusqu'à ce que ce soit naturel.
- Vérifiez les deux fonds dans l'aperçu, puis copiez le CSS.
Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.
Autres outils du même champ
DesignGénérateur d'ombre CSS
Crée une ombre box-shadow en CSS avec un aperçu en direct : règle le décalage, le flou, l'étendue, la couleur et l'opacité, puis copie le code. Gratuit et dans ton navigateur.
Convertisseur de Couleur: HEX, RGB
Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.
Générateur de Dégradés CSS
Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.
Générateur de Palettes de Couleurs
Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.
Questions fréquentes
Pourquoi n'y a-t-il pas d'option d'étalement ?
Parce que text-shadow en CSS n'en a pas. Il prend un décalage horizontal, un décalage vertical, un flou et une couleur, c'est tout. Les ombres de boîte ont un étalement et un mode intérieur ; les ombres de texte n'ont ni l'un ni l'autre, et c'est pourquoi ce sont deux outils distincts ici plutôt qu'un seul avec des réglages inertes la moitié du temps.
Pourquoi l'aperçu montre-t-il deux fonds ?
Parce qu'une ombre ne se lit que par rapport à ce qu'il y a derrière. Une ombre noire douce qui apporte un joli relief sur du blanc est invisible sur un fond sombre, et une ombre claire fait l'inverse. Voir les deux d'un coup vous le fait remarquer avant vos utilisateurs.
Puis-je utiliser un décalage négatif ?
Oui. Les valeurs négatives déplacent l'ombre vers la gauche et vers le haut au lieu de la droite et du bas, ce qu'il vous faut pour une source de lumière venant d'en bas ou de côté.
Comment obtenir une ombre discrète plutôt que lourde ?
Gardez de petits décalages, ajoutez un peu de flou et descendez bien l'opacité, autour du quart ou du tiers. La plupart des ombres de texte qui paraissent lourdes sont simplement une couleur totalement opaque qui aurait dû être plus douce.