Générateur CSS d’ombres de texte

Créer une pile d’ombres de texte

1. Modifiez le texte d’exemple et le décalage horizontal et vertical, le rayon de flou, la couleur et l’opacité de chaque calque actif. Les champs acceptent les centièmes ; les curseurs facilitent les réglages entiers.
2. Ajoutez, dupliquez, désactivez, supprimez ou déplacez les calques. Le premier calque actif est devant les autres ombres. Les calques désactivés gardent leurs valeurs mais sont omis du CSS.
3. Vérifiez le CSS et l’aperçu natif, puis sélectionnez Copier le CSS. Seule la déclaration d’ombre est copiée ; le texte, la typographie et le fond servent de contexte.

Comprendre les calques créés

Chaque calque produit un décalage horizontal, un décalage vertical et un flou non négatif en pixels CSS, puis une couleur RGBA explicite. Les valeurs négatives déplacent vers la gauche ou le haut ; un flou nul donne une ombre nette décalée. La propriété suit les glyphes et non une boîte rectangulaire.

La première ombre est devant les suivantes, tandis que ces ombres extérieures restent derrière le texte. Déplacer les calques peut modifier les couleurs superposées. Cette pile diffère d’une chaîne de filtres où chaque opération reçoit le résultat précédent.

L’opacité d’une ombre devient l’alpha de sa couleur. Ainsi 37,5 % devient exactement 0.375 sans quantification alpha sur huit bits. L’opacité du texte est une option de couleur distincte : un texte transparent peut garder des ombres visibles.

Un calque transparent actif reste dans la déclaration. Désactiver tous les calques ou vider la liste produit text-shadow: none;, qui réinitialise explicitement les ombres héritées ; une déclaration vide invalide ne le remplace pas.

Exemples d’ordre, de couleur et de transparence

Le premier calque de l’exemple utilise -3.25px horizontalement, 6.5px verticalement, un flou de 0px et #336699 à 37 %. Ses canaux sont 51, 102 et 153 et son alpha est 0.37. Le second calque orange utilise 0px, -2px, un flou de 12px et 80 %.

Placer le calque orange en premier change l’ordre séparé par des virgules sans modifier ses valeurs. L’aperçu montre les superpositions ; l’outil ne fusionne pas les doublons, ne trie pas les couleurs et ne supprime pas les calques invisibles.

Un calque noir transparent sans décalage ni flou est un CSS valide même si aucune ombre n’est visible. Le désactiver le retire de la pile ; sans calque actif, le résultat est la déclaration none.

Limites de l’éditeur et de l’aperçu

L’éditeur accepte douze calques au maximum, des décalages de -64 à 64 pixels CSS, un flou de 0 à 64, des couleurs hexadécimales à six chiffres et une opacité de 0 à 100 %, au centième près. Il utilise volontairement un sous-ensemble établi sans étalement, inset, currentColor, unités arbitraires ou import CSS ; des spécifications plus récentes traitent d’autres syntaxes.

L’exemple utilise du texte brut et une police système locale. Police de secours, glyphes, taille et retours à la ligne influencent l’aspect. Seul text-shadow est copié ; une autre page peut donc différer. Ce n’est pas une certification de contraste, de lisibilité ou d’égalité des pixels.

Les ombres n’agrandissent pas la disposition du texte ni la zone défilable. La zone avec marge intérieure est approximative et ses bords peuvent couper le flou ou les décalages. Le défilement ne garantit pas l’accès à tous les pixels de l’ombre.

Une valeur invalide d’un calque actif retire le CSS et l’exemple stylé jusqu’à correction. Les valeurs des calques désactivés sont ignorées jusqu’à leur réactivation. Des options d’aperçu invalides masquent seulement l’exemple ; un texte vide est permis.

Styles locaux sans téléverser le texte

L’outil n’ajoute ni téléversement, police distante, historique de réglages, lien contenant les données ou télémétrie avec votre exemple et vos réglages. La copie est explicite. Les services existants, extensions et copies conservées ne sont pas couverts par une promesse universelle de confidentialité ou d’effacement.