Box-shadow CSS
Le responsive vous a appris quand le layout change. La box-shadow ouvre Effects & Motion : une profondeur douce autour d’une carte, un aspect enfoncé dans un champ, ou un léger relief sur un bouton — le tout peint avec une seule propriété, box-shadow, sans modifier la taille du box model.
Les parties de l’ombre
📊 Les parties de box-shadow en un coup d’œil
| Partie | Rôle au quotidien |
|---|---|
offset-x / offset-y |
Où l’ombre se place par rapport à la boîte (positif = droite / bas) |
blur-radius |
Douceur — 0 est net ; des valeurs plus grandes adoucissent le bord |
spread-radius |
Optionnel : agrandit ou réduit la forme de l’ombre avant le flou |
color |
Souvent rgba(...) pour garder l’ombre semi-transparente |
inset |
Mot-clé optionnel — dessine l’ombre à l’intérieur de la boîte |
| Plusieurs listes | Des ombres séparées par des virgules se superposent (loin + douce, près + nette) |
Pensez élévation, pas décoration à outrance. Une couche douce sous une carte bat souvent trois contours criards.
Élévation externe douce
Recette classique pour une carte : petit décalage vers le bas, flou modéré, peu ou pas de spread, et un noir (ou gris) translucide. L’ombre doit suggérer une lumière venue d’en haut — pas un rectangle noir collé derrière la boîte.
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
Un offset-y positif place l’ombre sous la boîte. Gardez l’alpha bas pour que le texte et les voisins restent lisibles.
Inset — de la profondeur à l’intérieur
Ajoutez le mot-clé inset pour dessiner l’ombre vers l’intérieur. Utile pour les puits, les boutons enfoncés ou les champs qui doivent paraître creusés.
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset ne remplace ni border ni padding — il change seulement la façon dont la lumière semble tomber à l’intérieur de la zone peinte.
Ombres en couches
Listez plusieurs ombres, séparées par des virgules. Une couche lointaine et douce plus une couche plus proche et serrée se lit souvent comme une élévation naturelle, sans contour lourd.
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
L’ordre dans la liste est l’ordre de peinture ; les deux appartiennent au même élément. Préférez deux couches discrètes à une tâche opaque.
Remise à plat, accent et focus sur la boîte
Mettez box-shadow: none quand un état doit redevenir plat. Une ombre teintée peut soutenir un accent de marque — gardez toujours le flou doux et l’alpha modeste. Rappel : les glyphes utilisent text-shadow (Effets de texte) ; les boîtes utilisent box-shadow.
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
À vous de jouer
- Donnez à une carte blanche une seule ombre externe douce (
0en x, petit y, flou ~1rem, alpha bas). - Ajoutez une ombre
insetà un champ de recherche pour qu’il paraisse légèrement creusé. - Passez un panneau en pile à deux couches (proche + lointaine).
- Trouvez un
box-shadownoir opaque dans un fichier d’exercice et adoucissez-le avecrgba. - Vérifiez qu’une lueur de titre utilise
text-shadow, pasbox-shadow.
Erreurs fréquentes
- Ombres noires totalement opaques qui ressemblent à des boîtes en double
- Traiter le flou et le spread comme le même réglage
- Mettre
box-shadowsur du texte alors qu’il fallaittext-shadow - Ombrer chaque élément de liste, lien et icône jusqu’à ce que la page semble brumeuse
- Oublier
insetquand le design demande un aspect enfoncé ou creux
Résumé
box-shadowutilise offset, flou, spread optionnel, couleur etinsetoptionnel- Des ombres externes douces et translucides donnent une élévation calme
- Empilez des couches séparées par des virgules pour plus de profondeur ; utilisez
nonepour aplatir - Boîtes ≠ glyphes — réservez
text-shadowau texte - Suite dans Effects & Motion : Transitions
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut