Qu'est-ce que box-shadow et comment réussir une belle ombre de carte ?
box-shadow est une propriété CSS qui ajoute une ombre autour d'un élément. Vous lui donnez quatre nombres (décalage X, décalage Y, blur, spread), une couleur et l'ombre apparaît. En pratique, ces nombres sont difficiles à imaginer dans sa tête : il vaut mieux voir le résultat en direct et jouer avec des curseurs.
Ici, vous choisissez un preset (Material elevation 1-5, neumorphism, brutalist) ou vous construisez le vôtre. Chaque élément peut porter plusieurs ombres empilées en couches (liste à droite), ce qui donne la profondeur à la mode Apple ou Material.
Cliquez sur « Copier » et collez la règle CSS prête à l'emploi dans votre feuille de style.
Mode d'emploi
- Cliquez sur un preset dans la galerie (Material 1-5, neumorphism, glow, long shadow) pour partir d'un effet qui fonctionne.
- À droite se trouve la liste des couches. Cliquez sur une couche pour la modifier. Le bouton plus en ajoute une nouvelle.
- Curseurs : X et Y = décalage de l'ombre, blur = douceur du bord, spread = étendue. Couleur plus alpha à côté.
- Activez inset pour rendre l'ombre intérieure (cela ressemble à un creux, utilisé en neumorphism).
- Copiez la règle CSS et collez-la dans votre feuille de style ou dans le prop `style={{}}` de React.
Quand ça aide
Les ombres sont le détail le plus sous-estimé qui fait passer une UI de plate à premium. Trois mots à bannir en UI : « plat sans profondeur » :
- Cartes produit d'une boutique. Material elevation 2-3 a l'air sorti tout droit de Google, sans aucun graphisme.
- Modale / dialogue. Une ombre plus forte (elevation 4-5) détache la modale de la page et donne l'esprit Apple.
- Boutons neumorphiques. Deux ombres à la fois, l'une claire en haut à gauche, l'autre sombre en bas à droite, le bouton paraît en relief.
- État hover des cartes. Petite ombre au repos, plus grande au hover, un `transition: box-shadow 200ms` et vous avez la micro-interaction classique.
- Brutalist (dur, net, sans flou). Une ombre noire 8/8/0/0 capte parfaitement le look retro-cool.
- Glow / néon. Une ombre 0/0/24/4 dans une couleur vive avec alpha donne un bouton call-to-action lumineux.
Pour choisir une couleur d'ombre, voir le convertisseur de couleurs. Pour arrondir les coins des cartes, voir le générateur border-radius.