CSS · 2 min de lecture · mai 12, 2026
Les plus belles box-shadows CSS en 2026
Pourquoi les ombres comptent
L’ombre porte une information : elle indique la hauteur d’un élément par rapport à la page. Plus un élément est « haut », plus son ombre est large et diffuse. Maîtriser cette logique, c’est donner instantanément du relief et de la hiérarchie à votre interface.
La règle d’or : des ombres douces
Les ombres dures et noires appartiennent au passé. En 2026, on privilégie des ombres diffuses (grand flou) et très transparentes (opacité entre 0,06 et 0,16), avec une couleur sombre plutôt que du noir pur :
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
Le secret du rendu premium : les ombres en couches
Une seule ombre paraît souvent artificielle. La technique des designers consiste à superposer deux ou trois ombres : une nette et proche, une diffuse et lointaine. Le résultat imite la lumière réelle.
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12);
Nos recettes favorites
1. Carte flottante
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.10);
2. Bouton coloré
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
3. Effet « pressé » (inset)
box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.18);
Adapter l’ombre au dark mode
En thème sombre, les ombres noires deviennent invisibles. Augmentez l’opacité (0,4 à 0,6) ou remplacez l’ombre par une légère bordure lumineuse pour conserver le relief.
Générez les vôtres
Plutôt que de tâtonner, utilisez notre générateur de box-shadow : réglez chaque paramètre, visualisez le résultat en direct et exportez en CSS, SCSS ou Sass.