Mode d'emploi
- Réglez Décalage horizontal et Décalage vertical pour positionner l’ombre.
- Ajustez Flou et Étendue en observant l’aperçu en direct.
- Choisissez Couleur, puis réglez Opacité pour doser la transparence.
- Cliquez sur + Ajouter un calque pour superposer une autre ombre, puis réglez ses paramètres.
Exemples
Ombre à deux calques pour une fiche produit
Premier calque : décalage 0 / 2 px, flou 4 px, étendue −2 px, noir, opacité 0,1. Second calque : décalage 0 / 4 px, flou 6 px, étendue −1 px, noir, opacité 0,1.
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Ombre nette pour un bouton rétro
Décalage horizontal 6 px, décalage vertical 6 px, flou 0 px, étendue 0 px, couleur #2451E8, opacité 1.
box-shadow: 6px 6px 0 0 rgba(36, 81, 232, 1);
Astuces
- Choisissez la couleur de l'ombre avec le sélecteur de couleur.
- Combinez-la avec un arrière-plan en dégradé créé dans le générateur de dégradé CSS.
FAQ
Comment faire une ombre intérieure en CSS ?
Cochez Intérieure (inset) sur le calque souhaité. L’ombre se dessine à l’intérieur de la boîte et le mot-clé inset est ajouté au CSS.
L’arrondi et les couleurs de l’aperçu sont-ils inclus dans le CSS ?
Couleur de la boîte, Arrière-plan et Arrondi modifient uniquement l’aperçu. Le code généré contient seulement la déclaration box-shadow.
Peut-on utiliser des valeurs en rem ou des pixels décimaux ?
Non. L’outil accepte uniquement des pixels entiers (px), sans rem ni autre unité : de −200 à 200 pour les décalages et l’étendue, et de 0 à 300 pour le flou. L’opacité accepte des valeurs de 0 à 1, arrondies à deux décimales.
Pourquoi ma couleur hexadécimale est-elle refusée ?
Utilisez trois ou six chiffres hexadécimaux, par exemple #333 ou #2451E8, avec ou sans #. Les formats à quatre ou huit chiffres contenant une transparence sont refusés : réglez celle-ci avec Opacité. En cas d’erreur, l’aperçu et le CSS conservent la dernière ombre valide.