Générateur d'ombre CSS (box-shadow)

Comment utiliser le générateur d’ombre CSS

1. Partez d’un préréglage ou gardez l’ombre Douce proposée par défaut. La rangée Préréglages contient Douce, Nette, En couches, Élévation, Neumorphisme, Intérieure et Halo.
2. Dans Couches d’ombre, cliquez sur une couche pour la sélectionner. Vous pouvez la déplacer avec Monter et Descendre, ou l’effacer avec Supprimer. Ajouter une couche duplique la couche sélectionnée, pratique pour partir d’une copie.
3. Réglez la couche dans Modifier la couche sélectionnée : faites glisser le point dans le pavé Décalage, ou utilisez les curseurs et les champs Décalage horizontal (px), Décalage vertical (px), Flou (px) et Étendue (px).
4. Choisissez la Couleur de l’ombre avec le sélecteur ou saisissez n’importe quelle couleur CSS dans le champ de code, puis l’Opacité (%). Cochez Intérieure (inset) pour dessiner l’ombre à l’intérieur de la boîte.
5. Adaptez les Réglages de l’aperçu (Couleur de la boîte, Couleur du fond, Arrondi des coins (px)) pour juger l’ombre sur vos vraies couleurs. Ils ne modifient que l’aperçu.
6. Copiez la déclaration depuis Code CSS avec Copier.

Au clavier : sélectionnez le point du pavé Décalage et déplacez-le avec les flèches, de 1 px (10 px avec Maj).

Comment fonctionne box-shadow

La syntaxe d’une ombre est box-shadow: [inset] x y flou étendue couleur.

• x et y décalent l’ombre vers la droite et vers le bas ; des valeurs négatives la décalent vers la gauche et vers le haut. Une lumière venant d’en haut donne un y positif.
• Le flou adoucit le bord. Il ne peut pas être négatif ; à 0, on obtient une copie nette de la boîte.
• L’étendue agrandit (valeur positive) ou rétrécit (valeur négative) l’ombre avant le flou. Une étendue négative associée à un grand y garde l’ombre sous l’élément plutôt que tout autour.
• La couleur est presque toujours transparente. L’outil écrit les couleurs opaques en HEX et les couleurs translucides en rgba(), compris par tous les navigateurs. Si la couleur saisie a déjà une transparence, l’Opacité (%) s’y multiplie.
• inset place l’ombre à l’intérieur de la bordure, comme si la boîte était enfoncée dans la page.

L’ombre suit le border-radius de l’élément et ne change jamais la mise en page : elle n’occupe aucune place et ne crée pas de barre de défilement.

Pourquoi superposer plusieurs ombres ?

Une vraie ombre n’est pas un simple rectangle flou. Une ombre petite, sombre et serrée se trouve juste sous l’objet, et une ombre large, pâle et floue s’étend plus loin. Empiler deux à cinq couches imite ce phénomène et paraît bien plus naturel qu’une seule ombre épaisse. Le préréglage En couches double le décalage et le flou à chaque étape avec une faible opacité. Élévation reprend les ombres à trois couches de Material Design.

La première couche de la liste est peinte au-dessus des autres, exactement comme dans la valeur CSS. L’ordre compte surtout quand on mélange ombres intérieures et extérieures, ou quand on utilise des couleurs vives.

Le neumorphisme

Le neumorphisme (« soft UI ») applique deux ombres à un élément de la même couleur que son fond : une sombre décalée vers le bas et la droite, une claire décalée vers le haut et la gauche. Le préréglage Neumorphisme utilise #e0e5ec pour la boîte et le fond. Attention : ce style offre peu de contraste, les boutons qui l’utilisent ont besoin d’un état de focus bien visible et de libellés lisibles.