Atelier d'ombres CSS avec 3 propriétés en une UI

Que fait le générateur d’ombres CSS ?

Le générateur est un atelier pour les trois propriétés d’ombre CSS box-shadow, text-shadow et filter: drop-shadow() dans une seule UI. Par propriété, un aperçu live montre le résultat sur un élément de démo adapté : une carte 280×160 pour box-shadow, une grande glyphe « Aa » pour text-shadow et un logo SVG avec transparence pour drop-shadow. Vous pouvez basculer entre fond clair et sombre, définir la couleur d’élément par thème et affiner les valeurs via inputs numériques ou sliders.

Jusqu’à six couches s’empilent. Par couche, vous réglez décalage X et Y, flou et — uniquement pour box-shadow — spread et inset. La couleur est liée à un color picker plus un champ texte hex, pour que les valeurs hex à 8 chiffres avec alpha soient aussi acceptées. Un tap sur un preset charge un stack curé : carte plate, neumorphisme (clair/sombre), glassmorphisme (carte et sidebar), long-hard-shadow 45°, inner-shadow pressed, gravure de texte, glow de texte, drop-shadow SVG par défaut et drop-shadow logo heavy.

La sortie vient en trois formats : CSS pur avec déclaration box-shadow: / text-shadow: / filter:, bloc @theme Tailwind v4 pour class="shadow-{name}" ou class="text-shadow-{name}" (via directive @utility, car Tailwind v4 n’a pas d’utility text-shadow native), et une variante variable CSS avec une variable par couche plus un token combiné pour box-shadow: var(--shadow-{name}).

Quels sont les trois cas d’usage ?

box-shadow est le choix classique pour les éléments rectangulaires : cartes, boutons, modaux, tabs. La propriété autorise spread et inset, ce qui la rend plus flexible que les deux autres. L’ombre se dessine le long du rectangle de bounding-box — même si l’élément a des coins arrondis, l’ombre suit la forme border-radius.

text-shadow dessine une ombre uniquement derrière les glyphes, pas derrière tout l’élément. Pas de spread, pas d’inset (CSS-Spec). Cas d’usage typiques : halos de lecture sur fonds d’image (texte blanc + halo noir de 1 px = lisible sur n’importe quelle photo), effets de gravure (1 px vers le bas clair + 1 px vers le haut sombre) ou glows néon discrets pour titres marketing.

filter: drop-shadow() tourne comme filtre CSS et est la seule variante qui respecte le masque alpha. Un logo SVG avec transparence reçoit une ombre le long de la vraie forme. Un PNG avec fond détouré aussi. Le trade-off : les filtres sont plus coûteux pour le GPU que box-shadow, et plusieurs appels drop-shadow() s’écrivent comme chaîne de filtres séparée par espaces — pas par virgules comme avec box-shadow.

Comment le gate de lisibilité lit-il WCAG 2.2 ?

Dès que text-shadow ou drop-shadow agit sur du texte, le gate vérifie deux axes.

Axe 1 — texte contre fond : WCAG 2.2 critère 1.4.3 exige 4,5:1 pour le texte courant et 3:1 pour le grand texte (≥ 18 pt ou 14 pt gras). Si la valeur est sous 3:1, le gate tombe en rouge plein — aucun halo ne peut sauver, la couleur de texte ou de fond doit changer. Si la valeur est entre 3 et 4,5, le stack est seulement acceptable comme grand texte.

Axe 2 — ombre contre fond : WCAG 2.2 critère 1.4.11 « Non-text Contrast » exige 3:1 pour les composants graphiques structurels. Si l’ombre est sous 3:1, le halo est décoratif au lieu de structurel — si l’ombre doit porter la lisibilité du texte (typique pour texte blanc sur image claire), le contraste manque pour ce rôle. Le gate affiche un avis encadré orange.

Le générateur calcule les deux axes en live, dès que la couleur de texte, d’ombre ou de fond change. La logique de seuil suit l’algorithme W3C et renvoie une valeur brute (par ex. 7,21:1) plus une sévérité catégorique (ok / warn-shadow / warn-text / fail). Aucun autre outil d’ombre du set de comparaison ne livre le gate inline.

Que signifie light-dark() comme sortie dark-mode ?

light-dark() est une fonction CSS Color Module 4 qui choisit une valeur selon le color-scheme actuel. Au lieu de deux règles CSS séparées avec @media (prefers-color-scheme: dark), vous écrivez :

.card {
  box-shadow: 0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.56));
}

La fonction appartient au set Baseline 2024 et est disponible dans Chrome 123, Edge 123, Firefox 120 et Safari 17.5. Le statut Widely Available (≥ 30 mois de couverture large) est attendu fin 2026 — d’ici là, le générateur écrit automatiquement un fallback @supports qui route les navigateurs plus anciens vers deux règles séparées avec switch prefers-color-scheme.

Le toggle dans le générateur est un seul interrupteur. Si vous l’activez, le bloc de sortie émet les deux variantes — moderne et fallback — dans la même boîte de code. Vous copiez tout et pouvez immédiatement travailler en production. En mode sombre, les ombres sont typiquement trois à quatre fois plus fortes (alpha plus élevée), parce que la couleur de fond est plus proche de l’ombre et les couches fines se perdent autrement.

Quelles recettes de surface existent ?

Trois types de recipe préfabriqués peuvent être chargés par stack box-shadow.

Neumorphisme est un langage de design avec deux ombres par élément. Une ombre claire tombe vers la source lumineuse, une ombre sombre tombe loin de la source. L’élément paraît pressé hors de la surface. Le générateur offre huit positions de source lumineuse (haut gauche, haut, haut droit, droite, bas droit, bas, bas gauche, gauche) et un slider de profondeur (2–40 px). Attention : le Neumorphisme a des contrastes intrinsèquement faibles — le gate de lisibilité avertit activement si les ombres sont sous 3:1 contre la surface.

Glassmorphisme combine backdrop-filter: blur() saturate() avec un fond semi-transparent. L’effet : frosted-glass translucide sur un fond coloré. Le générateur émet la chaîne backdrop-filter plus une box-shadow compagnon pour l’arête de verre. Support navigateur : backdrop-filter est disponible non préfixé depuis Safari 18 (2024), avant Safari avait besoin du préfixe -webkit-backdrop-filter. Performance : backdrop-filter déclenche un upload GPU par frame — avec beaucoup d’éléments à effet de verre, la frame rate peut s’effondrer sur mobile bas de gamme.

Long-Hard-Shadow est le stack d’ombre 45° dure — six couches avec décalage croissant et alpha décroissante, pas de blur. Donne une ombre plate échelonnée comme sur de vieilles affiches ou les Material Design Long Shadows. Fort avec une couleur de marque vive comme ombre (au lieu du noir), parce que le bord net montre clairement la couleur.

Que sont les ombres coordonnées par couleur ?

Les ombres standard sont souvent rgba(0, 0, 0, 0.x) — un nuage gris sous l’élément. L’anti-pattern : pour les éléments colorés, l’ombre noire paraît d’un autre monde. Le moteur de couleur coordonnée dérive l’ombre de la couleur d’élément — même hue, lightness inférieure (en OKLCH : L − 0,4), chroma réduite (C × 0,6). Un bouton rouge reçoit une ombre rouge sombre, un bouton bleu une bleue sombre, un vert une verte sombre.

OKLCH est l’espace colorimétrique perceptuellement uniforme, dans lequel des distances numériques égales paraissent visuellement de même taille. Le décalage de lightness −0,4 est clampé à [0,02, 0,95], pour que même les éléments noirs ou blancs purs aient encore une ombre visible. La réduction de chroma à 0,6 empêche que l’ombre devienne aussi saturée que l’élément — sinon l’ombre ressemblerait à une deuxième layer au lieu d’une ombre.

Le générateur applique le moteur à la couche 1 dès que vous cliquez sur « Appliquer à la couche 1 ». L’alpha reste initialement à 30 % — vous pouvez l’ajuster par couche.

Que émet la sortie Tailwind v4 ?

Tailwind v4 a une configuration CSS-First avec le bloc @theme. Pour box-shadow, le générateur enregistre une variable --shadow-{name} et émet à la fois la classe arbitrary-value (class="shadow-[…]") et la classe basée token (class="shadow-{name}").

Pour text-shadow, Tailwind v4 n’a pas d’utility native. Le générateur utilise la directive @utility ajoutée dans Tailwind v4 :

@utility text-shadow-heading {
  text-shadow: 0px 1px 0px #FFFFFFCC, 0px -1px 1px #00000080;
}

class="text-shadow-heading" devient ainsi utilisable comme utility first-class. Pour drop-shadow, Tailwind v4 enregistre à nouveau un token --drop-shadow-{name} ; la classe s’appelle class="drop-shadow-{name}" et applique automatiquement la propriété filter.

Comment fonctionnent permalink et privacy ?

Le bouton permalink encode la configuration actuelle comme fragment JSON dans l’URL. Exemple : …/css-shadow-generator#config={"p":"box-shadow",…}. Les navigateurs chargent les fragments en local — le serveur ne voit jamais la partie #. Vous pouvez bookmarker le lien, le partager dans un doc ou l’envoyer par Slack. À l’ouverture, le générateur reconstruit le stack 1:1.

Pur client, sans upload, sans serveur, sans localStorage, sans cookie, sans tracking. À la fermeture de l’onglet, tout disparaît. Le moteur navigateur calcule chaque ombre en local — même avec de grands stacks à six couches, l’aperçu live est fluide sur tout appareil plus jeune que cinq ans.