Générateur de Text Shadow CSS
Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.
Qu'est-ce que la propriété text-shadow en CSS ?
text-shadow ajoute des effets d'ombre aux glyphes du texte. Chaque ombre est définie par un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur, et plusieurs ombres peuvent être combinées en une seule valeur séparée par des virgules pour créer des effets riches.
Comment fonctionnent les multiples couches d'ombre ?
Les couches sont dessinées de bas en haut dans l'ordre où elles sont déclarées, la première ombre de la liste passant donc au-dessus des autres. Ce générateur permet d'ajouter, de supprimer, d'activer et de désactiver des couches, chacune avec son décalage, son flou, sa couleur et son opacité, pour empiler des effets comme Néon ou 3D.
Que signifient décalage X, décalage Y et flou ?
Le décalage X déplace l'ombre à gauche ou à droite des glyphes, le décalage Y vers le haut ou le bas, et le rayon de flou adoucit ses bords : 0 donne un bord dur comme dans les styles Rétro ou Contour, tandis que des valeurs plus grandes diffusent la couleur comme une lueur.
Comment créer un effet néon ?
Utilisez le préréglage Néon ou configurez plusieurs couches avec un décalage nul, la même couleur vive et des valeurs de flou croissantes, par exemple 0 0 3px, 0 0 8px et 0 0 20px. Les halos empilés simulent l'éclat d'un tube néon.
text-shadow affecte-t-il les performances de rendu ?
Quelques couches statiques coûtent peu, mais le texte portant de nombreuses ombres très floues coûte plus cher à repeindre. Appliquer des ombres lourdes à de longs paragraphes ou animer text-shadow en continu peut faire chuter les images sur mobile ou sur des appareils modestes : préférez des titres courts, un flou modéré, ou animez l'opacité.
Comment rendre une ombre semi-transparente ?
Chaque couche dispose d'un curseur d'opacité qui convertit la couleur choisie en notation rgba, par exemple rgba(0, 0, 0, 0.5). Les ombres semi-transparentes se fondent avec n'importe quel arrière-plan, comme le fait le préréglage Papier pour un effet letterpress doux.
Quelle différence entre text-shadow et box-shadow ?
text-shadow s'applique à la forme des glyphes du texte et n'a pas de valeurs d'étalement ni d'ombre interne, tandis que box-shadow entoure la boîte rectangulaire de n'importe quel élément. Ils partagent la syntaxe de décalage et de flou, mais ne se remplacent pas.
Quels navigateurs prennent en charge text-shadow ?
text-shadow est pris en charge par tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera, et fonctionne sans préfixe de façon stable depuis plus de dix ans. Les ombres multicouches se comportent identiquement partout.
Ce que je saisis est-il envoyé à un serveur ?
Non. Le texte d'aperçu et toutes les couches que vous configurez restent dans votre navigateur et le CSS est généré localement dans la page. Rien ne transite par le réseau ; l'outil fonctionne donc aussi hors ligne une fois chargé.
Comment utiliser Générateur de Text Shadow CSS
Concevez des ombres de texte CSS en empilant des couches au lieu de deviner un seul décalage. Chaque changement se rend sur un grand texte d'aperçu en direct, et le CSS est généré localement dans votre navigateur.
- Tapez vos propres mots dans le champ Texte d'aperçu pour tester l'effet sur du vrai texte.
- Essayez un préréglage : Néon, Papier, 3D, Rétro, Lueur ou Contour charge des couches toutes prêtes.
- Ajustez le décalage X, le décalage Y, le flou, la couleur et l'opacité de chaque couche avec ses curseurs.
- Utilisez Ajouter une couche pour empiler plus d'ombres, décochez une couche pour la désactiver, ou supprimez-la avec l'icône corbeille.
- Copiez la règle text-shadow générée et collez-la dans votre feuille de style.
Les lueurs néon rendent le mieux avec trois ou quatre couches de la même couleur et un flou croissant — gardez les décalages à zéro et laissez le flou faire le travail.
Outils associés
- Générateur de Box Shadow CSS Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
- Générateur de Dégradés CSS Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
- Générateur de Textes Stylés Générateur de textes stylés gratuit avec 28 styles Unicode. Créez du texte gras, italique, gothique et cerclé pour vos bios Instagram, TikTok, WhatsApp et pseudos de jeux.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Clip Path CSS Générateur en ligne gratuit de clip-path CSS. Créez des formes polygon, circle, ellipse et inset avec des points déplaçables, aperçu en direct et copie du code CSS en un clic.
- Beautificateur CSS Formatez et embellissez le code CSS instantanément. Convertissez le CSS minifié en code lisible et bien indenté avec des options personnalisables.