Générateur de box-shadow CSS | Aperçu d'ombres

Créez des ombres CSS : décalages horizontal et vertical, flou, étendue, mode inset et aperçu de couleur en direct.

Paramètres de l'ombre

Ombre intérieure (inset)

Décalage horizontal (X) 10px

Décalage vertical (Y) 10px

Rayon de flou 15px

Rayon d'étendue 0px

Couleur de l'ombre

Couleur de la boîte

Couleur d'arrière-plan

Code CSS

Concevoir des ombres CSS

Réglez décalage X et Y, rayon de flou, étendue, mode inset et couleur pour prévisualiser un box-shadow et copier le CSS de vos boutons, cartes, panneaux et fenêtres modales.

Gardez des ombres subtiles et lisibles

Des valeurs de flou ou d'étendue trop grandes alourdissent le rendu, réduisent le contraste et pénalisent la performance mobile. Testez vos ombres sur le vrai fond de la page.

Où placer des box-shadows

Utilisez les ombres pour détacher cartes, menus déroulants, dialogues, en-têtes fixes et encadrés. Ne comptez pas sur l'ombre seule pour signaler un état important ou un repère d'accessibilité.