Générateur d'Ombres CSS
Glissez les curseurs pour façonner une ombre de boîte, superposez des couches pour donner de la profondeur et copiez le CSS obtenu instantanément.
Chaque ombre est générée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.
FAQ
Que contrôlent concrètement le décalage, le flou et l'expansion?
Le décalage déplace l'ombre vers la gauche/droite et le haut/bas, le flou adoucit ses contours, 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, ce qui est idéal pour une ombre fine et rapprochée.
À quoi sert l'option d'ombre intérieure (inset)?
Une ombre normale se projette à l'extérieur de l'élément, comme la lumière derrière une carte surélevée. L'option Inset la projette plutôt vers l'intérieur, donnant un effet enfoncé — très pratique pour des champs de saisie creusés ou des boutons enfoncés.
Pourquoi devrais-je superposer plusieurs couches d'ombre?
Une seule ombre peut paraître plate au-delà d'une certaine taille. Un relief réaliste combine généralement une ombre rapprochée et sombre avec une ombre plus douce et diffuse — ajoutez une deuxième couche et ajustez-les de façon indépendante pour obtenir cet effet.