Générateur d’ombres CSS (box-shadow)

Concevez un box-shadow avec des curseurs en direct pour le décalage, le flou, l’étendue et l’opacité, puis copiez le CSS.

Gratuit Sans inscription Fonctionne dans votre navigateur

Décalage horizontal

Décalage vertical

Flou

Étendue

Couleur de l’ombre

Opacité

Ombre intérieure (inset)

CSS

Faites glisser les curseurs ; l’aperçu se met à jour en direct.

Besoin d’un arrière-plan aussi ? Utilisez le Générateur de dégradés CSS.

Utilisations courantes

Donnez aux cartes et aux boutons une ombre douce et moderne
Créez un effet en creux pour les champs de saisie
Reproduisez l’ombre d’une maquette

Comment ça marche

Comment créer un box-shadow CSS

Réglez l’ombre

Déplacez les curseurs de décalage horizontal et vertical, de flou et d’étendue.

Choisissez la couleur et l’opacité

Choisissez la couleur de l’ombre et son intensité, ou passez à une ombre intérieure.

Copiez le CSS

Copiez la règle box-shadow et collez-la dans votre feuille de style.

FAQ

Bon à savoir

Comment utiliser le générateur de box-shadow CSS ?

1. Réglez l’ombre: Déplacez les curseurs de décalage horizontal et vertical, de flou et d’étendue. 2. Choisissez la couleur et l’opacité: Choisissez la couleur de l’ombre et son intensité, ou passez à une ombre intérieure. 3. Copiez le CSS: Copiez la règle box-shadow et collez-la dans votre feuille de style.

Quelle est la différence entre le flou et l’étendue ?

Le flou adoucit le bord de l’ombre. L’étendue rend l’ombre plus grande ou, avec une valeur négative, plus petite que l’élément.

Pourquoi utiliser une faible opacité ?

Des ombres douces d’environ 10–25% d’opacité paraissent plus naturelles qu’un noir uni.

box-shadow modifie-t-il la mise en page ?

Non. Les ombres sont dessinées en dehors de la mise en page et ne déplacent pas les autres éléments.

Poursuivre

Plus de design et de couleur

Voir tout