Construire des Box-Shadow multi-couches

Que fait le générateur Box-Shadow ?

Le générateur construit visuellement des ombres CSS. Par couche, vous choisissez le décalage horizontal et vertical, le flou, l’étalement et la couleur d’ombre — y compris un commutateur inset qui bascule entre ombres externes et internes. Jusqu’à dix couches sont empilables, ce qui est obligatoire pour des ombres UI réalistes : une couche unique paraît plate, trois couches empilées simulent le comportement réel de la lumière dans une pièce.

L’aperçu en direct montre le résultat sur une carte dont vous choisissez librement la couleur d’arrière-plan — important parce que le même set d’ombres rend complètement différemment sur off-white et sur gris dark mode. La sortie est proposée en quatre formats : CSS pur pour les stylesheets classiques, une classe Tailwind v4 avec bloc @theme à enregistrer comme design token, un attribut style inline et un bloc de CSS custom properties exportant chaque stack comme token réutilisable.

Comment fonctionne la propriété box-shadow ?

La propriété CSS box-shadow suit une syntaxe simple : [inset] offset-x offset-y [blur] [spread] color. Une ombre de carte classique ressemble par exemple à : box-shadow: 0 4px 8px -2px rgba(0,0,0,0.1). Des valeurs Y positives poussent l’ombre vers le bas, des valeurs X positives vers la droite. Le flou adoucit les bords — à 0 px l’ombre est nette, à 40 px diffuse comme un nuage.

L’étalement (spread) rend l’ombre plus grande ou plus petite que l’élément. Un étalement négatif rapproche l’ombre du cadre, ce qui est l’astuce pour les modal-lifts afin que l’ombre ne « déborde » pas. Un étalement positif l’agrandit — utile pour les effets de glow ou les couches Highlight larges dans les designs dark mode.

Comment combine-t-on plusieurs box-shadow ?

Plusieurs ombres tiennent dans une seule déclaration box-shadow, séparées par des virgules. Important : l’ordre compte. La première entrée se rend au-dessus — si vous voulez une ombre outline nette par-dessus une couche ambient douce, l’entrée outline va en premier.

.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),   /* contact */
    0 4px 8px rgba(0,0,0,0.08),   /* key */
    0 12px 24px rgba(0,0,0,0.08); /* ambient */
}

Trois couches suffisent généralement. Les ombres UI réalistes de Material Design empilent exactement ces trois couches : une contact-shadow courte et dense en bas, une key-shadow moyenne comme accent principal et une ambient-shadow large et douce qui simule la lumière diffuse de la pièce. Le mode recette auto du générateur construit ce stack en un clic.

Que signifie inset et quand l’utiliser ?

Le mot-clé inset avant les valeurs retourne l’ombre vers l’intérieur — l’élément paraît enfoncé dans une surface. Le navigateur peint les ombres inset par-dessus l’arrière-plan mais sous le contenu. Cas d’usage classiques :

• Champs de formulaire. Une légère ombre inset en haut (inset 0 1px 2px rgba(0,0,0,0.05)) signale « ici on peut entrer quelque chose ».
• Boutons enfoncés. Un inset marqué (inset 0 2px 4px rgba(0,0,0,0.16)) donne l’état actif classique sans que l’élément change de position.
• Outlines hairline. inset 0 0 0 1px var(--color-border) donne une ligne intérieure au pixel près qui rend mieux en High-DPI qu’une vraie border — le cadre intérieur n’est pas mangé par le box-sizing.

Dans le générateur, une case à cocher par couche bascule entre inset et outset. Les deux se mélangent dans le même stack — un look card classique combine une ambient-shadow externe avec une hairline interne.

Comment choisir couleur et alpha pour des ombres réalistes ?

Le noir pur avec alpha fixe (rgba(0,0,0,0.2)) paraît souvent plus dur que nécessaire en pratique. Trois stratégies :

1. Teinte avec le fond. Si la page est posée sur un off-white chaud (#FAFAF9), des ombres teintées chaud (oklch(0.2 0.05 60 / 0.2)) sont plus naturelles que du noir pur. Le générateur prend une couleur de teinte arbitraire et la réduit à la bonne alpha par couche.
2. Alpha par couche plutôt que single-layer alpha. Trois ombres empilées avec 8 %, 12 % et 20 % d’alpha (recette Comeau) donnent plus de profondeur qu’une ombre unique à 40 %. Les yeux interprètent la courbe de lumière étagée comme physiquement correcte.
3. OKLCH pour couleur stable en teinte. OKLCH (CSS Color Module Level 4) garde la saturation constante sur toutes les luminosités. En teintant une ombre vers une couleur de marque, OKLCH ne perd pas de chroma dans le sombre — pas hex/RGBA.

Le générateur émet la couleur dans la notation choisie pour chaque format de sortie : hex pour la compatibilité maximale, HSL pour le contrôle intuitif hue-sat-light, OKLCH pour les workflows Tailwind v4.

Quand l’élévation Material Design est-elle pertinente ?

Material Design définit 1–24 comme niveaux d’élévation canoniques, chacun avec un stack d’ombres précisément étagé. Pour obtenir un look Material 3, chargez simplement le niveau 1 pour les resting cards, le niveau 4 pour les FAB, le niveau 8 pour les modal sheets et le niveau 24 pour les dialog top-layers. Le générateur affiche 9 niveaux canoniques (1, 2, 3, 4, 6, 8, 12, 16, 24) en quick-picks.

Pour les designs hors écosystème Material, les niveaux servent de points de départ : chargez le niveau 4, baissez les valeurs de flou, échangez la teinte noire contre une hue de marque. La sortie change en direct. Vous obtenez ainsi la structure à 3 couches correctement étagée sans avoir à la déduire vous-même.

Comment écrit-on des box-shadow comme design tokens ?

Au lieu de déclarer chaque ombre de carte inline, on l’enregistre une seule fois comme custom property :

:root {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
  --shadow-modal: 0 8px 16px -4px rgba(0,0,0,0.16), 0 20px 40px -8px rgba(0,0,0,0.12);
}

.card { box-shadow: var(--shadow-card); }
.modal { box-shadow: var(--shadow-modal); }

Tailwind v4 autorise depuis la CSS-First-Config le même pattern directement dans le bloc @theme :

@theme {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
}

L’utility shadow-card devient ainsi automatiquement disponible — comme une classe native. Le générateur propose les deux variantes dans les modes de sortie « Variables CSS » et « Tailwind v4 », chacun avec un nom de token configurable.

Que coûtent les box-shadow au rendu ?

Le navigateur peint chaque ombre via une passe de paint séparée : d’abord l’élément, puis chaque ombre de derrière à devant. Trois facteurs poussent les coûts :

• Rayon de flou. Des valeurs de flou élevées (> 40 px) imposent au GPU de grosses opérations de convolution par frame. Pour des cartes statiques, cela n’a pas d’importance — pour des états hover animés ou des scroll-driven lifts, cela coûte du frame-time.
• Nombre de couches. Quatre ombres ou plus dans une déclaration doublent le coût de paint par frame. Trois couches sont le maximum usuel pour une UI animée.
• Valeurs d’étalement. Des valeurs d’étalement plus grandes agrandissent la région de paint et donc le nombre total de pixels que le navigateur doit flouter.

Le générateur affiche un avis de performance dès que le flou > 40 px OU que plus de trois couches sont empilées. Suggestion dans les deux cas : poser will-change: box-shadow pendant l’animation et le retirer après — cela épingle l’ombre dans une couche de compositor propre, ce qui rend la recomposition plus économique. Ne jamais le poser de manière permanente ; cela mange de la mémoire.

Quels cas d’usage existent ?

Resting cards. Une ombre subtile à 2 couches suffit. Exemple : 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08).

Hover lifts. Stack identique, mais décalage Y et flou multipliés par environ 2 — donne l’impression d’un soulèvement.

Modal sheets. Grand décalage Y, flou élevé, étalement négatif pour une forme focalisée. Plus une couche outline pour le mode contraste élevé.

Champs de formulaire enfoncés. Single inset-layer en haut pour le vibe « cliquez ici ».

États glow. Étalement > 0 avec alpha faible et hue de marque — par exemple pour les focus rings sur fonds sombres.

Accents soft-UI. Double ombre avec un highlight clair (haut gauche) et une ombre sombre (bas droite) — le générateur a un preset pour cela.

Questions fréquentes

Comment fonctionne la propriété CSS box-shadow ?

La propriété crée des ombres autour de la boîte d’un élément. Vous indiquez décalage horizontal et vertical, optionnellement flou et étalement, puis la couleur. Plusieurs ombres se séparent par une virgule — la première entrée est devant, les autres se superposent derrière.

Comment combine-t-on plusieurs box-shadow ?

Plusieurs ombres tiennent dans une seule déclaration box-shadow, séparées par des virgules. L’ordre compte : la première entrée se rend au-dessus. Dans le générateur, vous empilez jusqu’à dix couches — l’aperçu montre le résultat instantanément, la sortie contient toutes les couches dans l’ordre CSS.

Que signifie inset pour une box-shadow ?

Avec le mot-clé inset, le navigateur dessine l’ombre vers l’intérieur plutôt que vers l’extérieur — l’élément paraît enfoncé dans la surface. Les ombres inset se trouvent au-dessus de l’arrière-plan mais sous le contenu. Dans le générateur, un commutateur par couche bascule entre inset et outset.

Quelle valeur de flou convient aux cartes ?

Les cartes subtiles ont besoin de 4–8 px de flou, les états hover discrets de 12–24 px, les sheets modaux de 24–40 px. Des valeurs plus élevées paraissent plus douces mais coûtent du temps de paint sur mobile. Le générateur avertit pour un flou supérieur à 40 px et suggère will-change: box-shadow pour les animations.

Comment utiliser les box-shadow dans Tailwind v4 ?

Tailwind v4 autorise des classes arbitraires shadow-[…] pour toute valeur d’ombre. Plus élégant : enregistrez le stack via @theme { --shadow-app: …; } dans votre CSS et utilisez la classe shadow-app comme une utility native. Le générateur propose les deux variantes en sortie.

Qu’est-ce qu’une auto-layered shadow ?

Trois couches empilées — une courte contact-shadow au bord, une key-shadow moyenne comme accent principal, une ambient-shadow longue et douce pour la profondeur — donnent des ombres bien plus réalistes qu’une seule couche. Le mode recette auto génère ce stack à 3 couches à partir du niveau d’élévation, de la direction de la lumière et de la teinte de couleur.

OKLCH fonctionne-t-il dans les couleurs de box-shadow ?

Oui. Les navigateurs qui prennent en charge OKLCH (Chrome 111+, Firefox 113+, Safari 16.4+) rendent oklch(0.6 0.18 30 / 0.2) comme couleur d’ombre exactement comme n’importe quelle valeur hex. OKLCH garde la saturation constante en teintant — le générateur bascule entre sortie hex/HSL/OKLCH sans perte.

L’outil enregistre-t-il mes shadow sets ?

Non. Toutes les saisies restent dans l’onglet du navigateur, rien n’est stocké ni téléversé. Au rechargement, l’outil est vide. Pour conserver des sets, copiez la sortie des variables CSS dans votre propre stylesheet ou dans tokens.css.

Quels outils CSS sont liés ?

D’autres outils pour le CSS-authoring et la gestion des couleurs :

• Générateur de dégradé CSS — construire des dégradés en OKLCH/Tailwind v4.
• Convertisseur Hex vers RGB — convertir des codes hex en RGB, HSL et OKLCH.
• Vérificateur de contraste — vérifier le contraste WCAG AAA entre deux couleurs.
• Formateur CSS — formater proprement du CSS brut ou minifié.