Générateur de box-shadow CSS

Réglez décalage, flou, étalement, couleur et opacité en voyant le résultat, puis récupérez le CSS. Inclut des préréglages qui superposent plusieurs ombres pour une profondeur plus naturelle.

🎨 Tout tourne dans votre navigateur. Rien à installer, aucun compte.

Décalage X0px

Décalage Y8px

Flou20px

Étalement-4px

Couleur de l’ombre

Opacité20%

Ombre intérieure (inset) — un effet enfoncé

box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);

Une ombre naturelle tombe généralement droit vers le bas (décalage X de 0) et utilise un bleu marine léger plutôt que du noir, un peu plus sombre que le fond. Les ombres noir pur paraissent ternes.

Ce que fait cet outil

Décalage, flou, étalement et couleur
Ombres intérieures (inset) prises en charge
Préréglages naturels multicouches
Copier le CSS

Autres outils de couleur

Générateur de dégradé CSSConstruire un dégradé CSS avec deux ou trois couleurs Générateur de palettes de couleursSortir les couleurs qui vont avec une couleur de base, par règle Générateur de nuancesTransformer une couleur en échelle 50–900 Mélangeur de couleursTrouver la couleur entre deux couleurs

Les couleurs peuvent paraître un peu différentes selon votre écran et son profil couleur.