Couleurs & design
Générateur de box-shadow
L'ombre parfaite aux curseurs, le code CSS en un clic.
Une ombre portée bien réglée donne du relief à une carte, détache un bouton du fond, hiérarchise une interface — mais écrire une valeur box-shadow à la main relève de la devinette. Ici, tout se règle aux curseurs : décalage horizontal et vertical, rayon de flou, étendue, opacité de l'ombre, et une case pour passer en ombre interne (inset). L'aperçu, une carte sur fond neutre, reflète chaque réglage en direct, exactement comme dans votre navigateur. Quand le rendu vous convient, copiez la déclaration CSS complète d'un clic et collez-la dans votre feuille de style ou votre design system. Gratuit, sans inscription, entièrement dans votre navigateur.
Comment faire ?
- Réglez les décalages horizontal (X) et vertical (Y).
- Ajustez le flou, l'étendue et l'opacité de l'ombre.
- Activez « inset » si vous voulez une ombre interne.
- Copiez le code CSS généré d'un clic.
Questions fréquentes
Comment obtenir une ombre naturelle et discrète ?
Décalage vertical léger (2 à 8 px), décalage horizontal nul ou faible, flou généreux (deux à trois fois le décalage), opacité basse (8 à 20 %). La lumière vient d'en haut : l'ombre tombe vers le bas.
À quoi sert le paramètre « étendue » (spread) ?
Il agrandit (valeur positive) ou contracte (valeur négative) l'ombre avant le flou. Une étendue négative crée des ombres serrées très élégantes ; une étendue positive avec flou nul dessine une bordure pleine.
Quand utiliser une ombre interne (inset) ?
Pour donner un effet creusé : champs de saisie, boutons pressés, zones en retrait. L'ombre se dessine à l'intérieur de l'élément au lieu de se projeter derrière lui.
Les ombres pénalisent-elles les performances ?
Une box-shadow statique est très bien optimisée par les navigateurs. Évitez seulement d'animer le flou en continu sur de grandes surfaces — pour les transitions, animez plutôt l'opacité d'un pseudo-élément porteur de l'ombre.