Générateur de box-shadow

Qu’est-ce qu’un générateur de box-shadow et de bouton ?#

Un box-shadow est la règle CSS qui peint une ombre portée derrière un élément. Malgré son nom, il fait bien plus que des ombres : empilé correctement, il produit l’élévation douce qui donne aux cartes et boutons d’interface modernes leur aspect physique, il peut creuser un sillon intérieur pour un état « enfoncé », et il peut imiter une lueur colorée autour d’un champ focalisé. Le piège, c’est qu’obtenir une seule ombre correctement implique de jongler avec cinq valeurs par couche (décalage X, décalage Y, flou, étendue, couleur) plus un mot-clé optionnel inset — et la plupart des vrais boutons empilent deux ou trois couches, donc vous finissez par régler dix à quinze nombres à la main.

Cette page supprime l’arithmétique. Vous empilez des couches d’ombre et réglez le rayon, la bordure, l’espacement et les couleurs d’un bouton dans la barre latérale ; le volet droit affiche un bouton en direct avec l’ombre appliquée et écrit à la fois la règle CSS .btn et le HTML <button> correspondant, prêts à coller. La valeur par défaut que vous voyez au chargement est le bouton surélevé à deux couches familier des design systems modernes — un bon point de départ que vous ajustez ensuite vers votre propre marque.

Comment l’utiliser#

La barre latérale contient les contrôles ; le volet droit contient l’aperçu, la sortie CSS et la sortie HTML.

1. Construisez l’ombre. Sous Ombres, cliquez sur Ajouter un calque pour empiler une nouvelle couche. Chaque couche possède six contrôles :
   • Décalage X / Décalage Y — de combien l’ombre se décale à droite/en bas (le négatif va à gauche/en haut). 0/0 la centre, produisant une lueur uniforme.
   • Flou — la douceur du bord. 0 est une copie dure et plate ; les grandes valeurs la diffusent. Le flou ne peut pas être négatif en CSS.
   • Étendue — agrandit ou rétrécit l’empreinte de l’ombre. Une étendue négative resserre un flou large en un bord net et convaincant.
   • Couleur — une couleur hex. Utilisez le canal alpha (un hex à 8 chiffres comme #00000033) pour rendre l’ombre translucide ; les couleurs entièrement opaques s’affichent en #RRGGBB solide.
   • Intérieure — activez-le pour peindre l’ombre à l’intérieur de l’éléément (un aspect enfoncé, gravé) au lieu de derrière.
   • Monter / Descendre / Supprimer réordonnent ou retirent les couches. La première couche de la liste est peinte au-dessus ; la dernière est la plus en arrière.
2. Stylez le bouton. Sous Bouton, définissez le texte de l’Étiquette, puis le Rayon, la largeur de la Bordure, la Couleur de bordure, l’Espacement Y / X, la couleur de Fond et la Couleur du texte. Les champs de couleur associent une zone de texte hex à un sélecteur de couleur natif.
3. Copiez ce dont vous avez besoin. Copier à côté de la sortie CSS récupère la règle .btn complète ; Copier à côté de la sortie HTML récupère l’élément <button>. Régler la largeur de bordure à 0 réduit la bordure en border: none;.

Caractéristiques principales#

• Plusieurs couches, dans l’ordre. Une ombre convaincante est presque toujours à deux ou trois couches — un bord sombre et serré près de l’élément et une diffusion plus douce et plus claire plus loin. Vous pouvez empiler et réordonner autant de couches que nécessaire.
• Sérialisation des couleurs consciente de l’alpha. Une couleur entièrement opaque est émise en #RRGGBB propre ; dès que vous ajoutez de la transparence, elle bascule en rgba(r, g, b, a) avec un alpha épuré — les formes que les feuilles de style réelles utilisent.
• Le bouton entier dans une seule règle. Rayon, bordure, espacement, fond, couleur du texte et l’ombre sont tous émis dans un seul bloc .btn, donc un seul copier-coller style complètement l’élément.
• Un HTML qui correspond. La sortie HTML est simplement <button class="btn">Étiquette</button>, avec l’étiquette échappée en HTML — même une étiquette pleine de < ou & est sûre à coller.
• Aperçu en direct figé en gauche-à-droite. Un décalage X positif décale toujours l’ombre vers la droite, donc l’aperçu est forcé en LTR quelle que soit la langue de la page.

Exemple commenté#

La page se charge avec un bouton indigo surélevé prêt à l’emploi. Son ombre comporte deux couches : un bord serré à -1px d’étendue collé au bouton, et une diffusion plus large et plus faible plus loin. Le CSS généré exact :

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Remarquez que les deux couches coopèrent : la première (4px 6px de flou, -1px d’étendue, alpha 0.2) définit le bord de contact net ; la seconde (10px 15px de flou, -3px d’étendue, alpha 0.102) fournit le soulèvement d’ambiance. Baissez l’alpha et l’ombre se transforme en un tampon noir plat ; montez l’étendue et le bouton semble flotter trop haut.

Pour un état enfoncé, effacez ces couches et ajoutez-en une seule : Intérieure activé, décalage 0/2, flou 4, étendue 0, couleur #00000033. La sortie devient inset 0 2px 4px rgba(0, 0, 0, 0.2) — l’élément paraît maintenant enfoncé dans la surface, parfait pour un style :active.

FAQ#

Pourquoi la couleur ressort en rgba(...) alors que j’ai saisi du hex ?#

Quand votre hex possède un canal alpha (8 chiffres, comme #00000033), l’outil le sérialise en rgba(r, g, b, a) car c’est la forme que la plupart des outils CSS et des anciens navigateurs analysent fiablement. Une couleur entièrement opaque — sans alpha, ou alpha à FF — reste en #RRGGBB compact. Les deux rendent à l’identique de ce que vous avez réglé ; c’est purement une question de notation plus robuste en aval.

Dans quel ordre les couches sont-elles peintes ?#

La première couche de la liste est peinte au-dessus, la dernière au fond. Pour une élévation naturelle, mettez la couche nette, sombre et proche en premier et la couche douce, claire et lointaine en second — ainsi le bord de contact serré n’est pas étouffé par la diffusion d’ambiance. Réordonnez avec Monter / Descendre jusqu’à ce que l’aperçu soit correct.

Flou ou étendue — quelle est la différence ?#

Le Flou adoucit le bord de l’ombre (un dégradé de la couleur pleine vers le transparent). L’Étendue agrandit ou rétrécit l’ombre entière d’une quantité fixe avant l’application du flou — une étendue positive la rend plus grande et plus solide, une étendue négative la grignote et est le secret d’un bord net et professionnel sur une couche à flou large. Une erreur courante consiste à n’utiliser que le flou et à obtenir un nuage boursouflé ; ajouter -2px ou -3px d’étendue la ramène en forme.

Puis-je utiliser cette ombre sur un div, pas un bouton ?#

Oui. Le CSS fonctionne sur tout élément qui accepte box-shadow — copiez uniquement la ligne box-shadow: (ou la règle entière renommée vers votre sélecteur) et laissez de côté les déclarations spécifiques au bouton dont vous n’avez pas besoin. La sortie HTML n’est pertinente que lorsque vous voulez réellement un <button>.