Générateur d’Ombres CSS

Ajustez des curseurs pour façonner un box-shadow, empilez plusieurs couches pour la profondeur, et copiez le CSS obtenu aussitôt.

Couches d’ombre
Couche 1
CSS
Ajustez les curseurs pour façonner votre ombre.

Chaque ombre est calculée dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.

FAQ

Que contrôlent vraiment le décalage, le flou et l’expansion ?

Le décalage déplace l’ombre horizontalement et verticalement, le flou adoucit ses bords, et l’expansion l’agrandit ou la réduit avant l’application du flou. Une expansion négative resserre l’ombre vers l’intérieur, utile pour une ombre proche et compacte.

À quoi sert l’option inset ?

Une ombre normale tombe à l’extérieur de l’élément, comme la lumière derrière une carte surélevée. Avec inset, elle passe à l’intérieur, donnant l’impression que l’élément est enfoncé — utile pour un champ creusé ou un bouton pressé.

Pourquoi empiler plusieurs couches d’ombre ?

Passé une certaine taille, une seule ombre paraît plate. Un vrai relief combine généralement une ombre resserrée et sombre avec une autre plus douce et plus large — ajoutez une seconde couche et réglez chacune séparément pour cet effet.