Générateur CSS Box Shadow

Générez visuellement des propriétés CSS box-shadow avec des curseurs. Visualisez un aperçu en direct et copiez le code CSS prêt à l'emploi en un clic.

Studio · environnement neutre

X0px

Y8px

Flou24px

Étendue-6px

Opacité14%

Couleur

CSS

Fonctionnalités

Réglage par curseurs

Sélecteur de couleur

Basculer l'ombre intérieure

Plusieurs couches

Aperçu en direct et code CSS

Comment Utiliser

1. Modelez l'ombre avec les curseurs — la carte neutre de la surface montre exactement le rendu final.

2. Les vraies ombres sont en couches : empilez jusqu'à quatre calques ou partez d'un préréglage (Douce, Surélevée, Flottante, Intérieure).

3. Changez la surface pour vérifier l'ombre sur blanc, gris et sombre, puis copiez le CSS.

À propos de cet outil

Les ombres convaincantes dans une interface comportent généralement plusieurs couches : une ombre serrée et plus sombre pour le contact, et une ombre large et douce pour la distance. Ce générateur vous permet d'empiler jusqu'à quatre couches box-shadow, en réglant pour chacune le décalage horizontal et vertical, le flou, l'étalement, la couleur, l'opacité et le mode intérieur, pendant qu'une carte neutre sur la scène montre le résultat exact. Des préréglages offrent des points de départ — Douce, Surélevée, Flottante et Intérieure — et vous pouvez faire alterner la scène entre surfaces blanches, grises et sombres pour vérifier que l'ombre reste lisible sur chacune. Le CSS généré liste les couches dans le bon ordre avec des couleurs rgba, prêt à coller dans une feuille de style ou un fichier de design tokens.

Questions Fréquentes

Que signifient décalage, flou et étalement ?

Les décalages X et Y déplacent l'ombre vers la droite et vers le bas (des valeurs négatives la déplacent vers la gauche et vers le haut). Le flou adoucit le bord ; plus la valeur est grande, plus l'ombre est diffuse. L'étalement agrandit ou réduit l'ombre avant le flou : un étalement négatif garde une ombre douce bien rentrée sous l'élément.

Pourquoi utiliser plusieurs couches d'ombre ?

Les objets réels projettent une ombre nette près de la surface et une ombre plus douce plus loin. Combiner une petite couche sombre et une grande couche légère paraît plus naturel qu'une seule ombre lourde, et c'est ainsi que la plupart des design systems définissent l'élévation.

À quoi sert inset ?

Une ombre inset est dessinée à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur, ce qui lui donne un aspect enfoncé. On l'utilise souvent pour les champs de saisie, les zones en creux et les interrupteurs.

Les ombres nuisent-elles aux performances ?

Les ombres statiques coûtent peu. Animer box-shadow sur de nombreux éléments peut provoquer des repeints ; pour les effets au survol, animez plutôt l'opacité d'un pseudo-élément qui porte déjà l'ombre, ou gardez des valeurs de flou modérées.

Pourquoi mon ombre paraît-elle différente sur un fond sombre ?

Les ombres sombres perdent leur contraste sur les surfaces sombres. Les designs en thème sombre réduisent souvent l'opacité des ombres et s'appuient sur des surfaces plus claires ou des bordures discrètes pour marquer l'élévation.