Atelier text-shadow avec scène typographique et porte AAA-halo

Que fait le générateur text-shadow ?

Le générateur est un atelier focalisé exclusivement sur la propriété CSS text-shadow. Contrairement au générateur CSS-shadow qui couvre trois propriétés en parallèle, vous obtenez ici cinq leviers spécialisés pour pur effet de texte : scène typographique, porte AAA-halo, companion -webkit-text-stroke, émetteur utilitaire Tailwind v4 et pack de presets néo-brutalisme.

Jusqu’à huit couches d’ombre peuvent être empilées, chacune avec offsets X et Y (±50 px), flou (0-100 px) et couleur (hex 6 ou 8 chiffres avec alpha). Un aperçu en direct montre le stack rendu au niveau typographique choisi — Display 72 px, H1 40 px, Body 16 px, Caption 12 px ou Code 14 px monospace.

25 presets curés sur six catégories couvrent les mouvements canoniques de text-shadow : Drop (Soft-Drop 1/2/3, Long-Drop), Glow (Néon-Cyan, Néon-Magenta, Pulse-Ambre, Halo Doux), 3D-Extrude (3D-Extrude, Bloc-stratifié, Long-Hard-45), Letterpress (Embossé, Enfoncé, Gravé, Papier-Inset), Retro (Vaporwave, Chrome 80, Imprimé Journal, Machine à écrire) et Néo-Brutalisme (Brutal Noir, Brutal Couleur, Brutal Tampon, Brutal Sticker).

Pourquoi un outil dédié uniquement à text-shadow ?

text-shadow a sa propre caractéristique de lecture. Les ombres derrière les glyphes se comportent différemment de derrière les cartes : un flou 8 px qui donne de la profondeur subtile sur une carte mange le glyphe en body-text. L’heuristique de lisibilité diffère du cas box-shadow — pour les cartes seul compte texte-vs-fond, pour text-shadow aussi ombre-vs-texte.

Les outils spécialisés rendent mieux que les ateliers quand le cas d’usage est assez étroit. Vous n’avez pas besoin de switch d’onglet 3-propriétés, ni de picker de recette de surface, ni de chaîne de filtres drop-shadow — vous construisez une headline et voulez la voir en cinq tailles et vérifier contre les pièges halo.

Comment fonctionne l’aperçu de scène typographique ?

La scène typographique est le seul levier de l’outil qui n’entre pas dans la sortie CSS — c’est un commutateur d’aperçu. Vous basculez entre cinq niveaux prédéfinis, chacun mappé à un cas d’usage typique.

Display (72 px, Inter Bold, line-height 1.05) : headlines hero, splash screens, déclarations above-the-fold. À cette taille, les ombres ont assez de place pour porter même de larges valeurs de flou. Les offsets néo-brutalisme au-dessus de 6 px fonctionnent particulièrement fort ici.

H1 (40 px, Inter Bold, line-height 1.1) : taille classique de heading de section. Les ombres ont besoin ici de valeurs plus serrées qu’à Display — 1-2 px de drop suffit la plupart du temps, les stacks plus grands paraissent surchargés.

Body (16 px, Inter Regular, line-height 1.5) : texte courant par défaut du navigateur. À cette taille se montre le piège blur-halo : 10-px-blur élégant à Display rend le body-text flou et difficile à lire. La porte le flag automatiquement.

Caption (12 px, Inter Medium, line-height 1.4) : légendes, notes de bas, petites pilules. Les ombres sont risquées ici — chaque pixel de plus appuie la lisibilité. Souvent 0-1 px de drop avec 1 px de flou suffit.

Code (14 px, JetBrains Mono Medium, line-height 1.5) : échantillons mono-espacés. Les ombres sur code paraissent souvent malpropres car les espaces uniformes des glyphes montrent le halo trop nettement.

Comment la porte de lisibilité AAA-halo lit-elle ?

Trois axes, chacun calculé en direct :

Axe 1 — Texte-vs-fond (WCAG 2.2 SC 1.4.6 AAA) : texte courant a besoin de 7:1, Large-Text (≥ 18 pt ou 14 pt gras) 4,5:1. Si la valeur est sous 4,5:1, la porte bascule en orange — le stack n’est acceptable qu’en headline. Sous 3:1, la porte tombe en rouge — aucun halo ne peut sauver ça.

Axe 2 — Ombre-vs-fond (WCAG 2.2 SC 1.4.11) : composants graphiques structurels ont besoin de 3:1. Si l’ombre est conçue comme support de lisibilité (typique sur texte blanc sur image claire), elle ne doit pas tomber sous 3:1, sinon elle ne porte pas le texte.

Axe 3 — Heuristique glow-trap : si l’ombre est plus proche de la couleur de texte que du fond, le halo fusionne avec le glyphe au lieu de le détacher. La valeur est visible comme contraste ombre-vs-texte. Dès que le contraste ombre-vs-texte est nettement sous celui ombre-vs-fond et que les deux dérivent sous 1,5:1, la porte alerte explicitement.

Plus : avertissement blur-halo : sur body-text (≤ 16 px) et flou > 10 px, la porte flag la guidance WebAIM basse vision — des halos flous autour de body-text peuvent surcharger les lecteurs avec dyslexie ou basse vision.

Comment fonctionne le companion -webkit-text-stroke ?

Quand vous avez besoin d’un effet outline, il y a deux voies sur le web : le 4-direction text-shadow-fake-stroke traditionnel (quatre couches à ±X, ±Y avec flou 0) ou le moderne -webkit-text-stroke plus paint-order: stroke fill. Les deux donnent des résultats similaires mais ont des trade-offs différents.

-webkit-text-stroke est crisp et scale avec la taille de police — une outline 1 px reste une outline 1 px, que la headline fasse 16 px ou 96 px. Plus : paint-order: stroke fill rend le stroke DERRIÈRE le fill au lieu de devant, pour que les fines courbes de glyphes ne soient pas couvertes par l’outline. Support navigateur : Chromium, Safari et Firefox tous ≥ 2023.

Le fake-stroke text-shadow a en revanche des avantages sur outlines plus épaisses (au-delà de 2 px) et pour ajouter du flou — -webkit-text-stroke ne peut pas faire de flou. Les anciens navigateurs qui ne connaissent pas paint-order retombent sur le fake-stroke.

Le générateur émet les deux patterns côte à côte dans une boîte de sortie. Vous copiez les deux dans la feuille de style et décidez à l’implémentation quelle variante gagne — ou écrivez les deux dans un bloc @supports et laissez le navigateur router.

Que produit la sortie Tailwind v4 ?

Tailwind v4.1 a cinq tailles text-shadow-* intégrées. Elles couvrent les drop-shadows simples, mais pas les stacks néon, 3D-extrude ou offsets néo-brutalisme. Le générateur produit trois patterns d’intégration Tailwind en parallèle :

Pattern 1 — Bloc @utility (recommandé pour reuse de design-token) :

@utility text-shadow-neon-cyan {
  text-shadow: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

Ainsi class="text-shadow-neon-cyan" est utilisable comme utilitaire de première classe.

Pattern 2 — Valeur arbitraire (pas d’édition de thème) :

<h1 class="[text-shadow:0px_0px_4px_#00FFFF,_0px_0px_12px_#00FFFFCC]">…</h1>

Bon pour les one-offs sans utilitaire réutilisable.

Pattern 3 — Variable @theme (pour reuse var()) :

@theme {
  --text-shadow-neon-cyan: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

.headline { text-shadow: var(--text-shadow-neon-cyan); }

Pratique si la variable doit être réutilisée dans plusieurs propriétés CSS.

Qu’est-ce que le pack de presets néo-brutalisme ?

Le néo-brutalisme est la contre-tendance 2026 au Refined-Minimalism : bords durs, hauts contrastes, pas de translucidité. Dans le contexte text-shadow cela signifie : offsets durs 4-8 px, zéro flou, une couleur plate par ombre, pas de gradients alpha. Le pack contient quatre presets :

Brutal Noir : texte jaune sur fond blanc, décalage 6 px noir. Effet de tampon de poster d’impression analogique.

Brutal Couleur : texte blanc sur fond noir, décalage 8 px rose. Forte reconnaissance pour marques brutalisme.

Brutal Tampon : double ombre — couche 1 en couleur d’accent, couche 2 en noir décalée. Effet complémentaire comme tamponné l’un sur l’autre.

Brutal Sticker : double ombre — couche 1 en blanc comme highlight, couche 2 en noir décalée. Effet de sticker collé avec outline plastique.

Tous quatre presets sont WCAG-aware : les offsets durs sont en règle générale sûrs en contraste car aucune translucidité ne dilue la séparation de couleurs.

Comment l’outil sauvegarde-t-il ma configuration ?

Pas du tout. Pure-client, pas de téléversement, pas de serveur, pas de localStorage, pas de cookie, pas de tracking. À la fermeture de l’onglet tout disparaît. Le moteur du navigateur calcule chaque ombre localement — même sur de grands stacks à huit couches, l’aperçu en direct est fluide.

Qui veut sauvegarder une configuration sur plusieurs sessions copie la sortie CSS ou Tailwind dans sa propre feuille de style. C’est l’avantage de text-shadow comme propriété CSS : toute la configuration tient dans une seule déclaration et ne nécessite pas de fichier externe.