box-shadow: 0 10px 24px -2px rgba(34, 37, 61, 0.15);
Notre générateur de box-shadow CSS permet de créer visuellement n’importe quelle ombre CSS, avec un aperçu en temps réel et le code prêt à copier. Vous pouvez ajuster les offsets X et Y, le flou, l’étalement, la couleur et l’opacité, empiler plusieurs calques d’ombre pour obtenir des effets riches (Material Design, neumorphisme, néon), et partir de presets pré-conçus pour gagner du temps. Gratuit, sans inscription, 100 % local.
Comprendre les paramètres d’une box-shadow
Une ombre CSS s’écrit avec cette syntaxe de base :
Offset X et Offset Y
Les offsets contrôlent le décalage horizontal et vertical de l’ombre par rapport à l’élément. Une valeur positive en X décale l’ombre vers la droite, une valeur négative vers la gauche. Une valeur positive en Y décale vers le bas, une valeur négative vers le haut. Pour une ombre réaliste (simulation d’une lumière venant d’en haut), on utilise généralement un offset Y positif entre 4 et 20 px, et un offset X proche de 0.
Blur (flou)
Le blur contrôle la douceur de l’ombre. Une valeur de 0 donne une ombre nette aux contours francs (effet graphique, rétro). Plus la valeur est élevée, plus l’ombre devient diffuse. Pour une ombre naturelle, le blur fait généralement entre 1,5 et 2,5 fois la valeur de l’offset Y.
Spread (étalement)
Le spread agrandit ou rétrécit l’ombre avant que le blur ne s’applique. Une valeur positive étend l’ombre au-delà du contour de l’élément (effet halo), une valeur négative la rétrécit (ombre plus concentrée, moins visible sur les bords). Souvent laissée à 0 pour une ombre standard, ou en valeur légèrement négative pour resserrer l’ombre sur le centre.
Color (couleur) et opacité
La couleur de l’ombre est presque toujours un noir ou un gris foncé avec une opacité faible (10 à 25 %), pour rester subtile. Utiliser rgba(0, 0, 0, 0.15) ou rgba(34, 37, 61, 0.15) produit un effet plus naturel qu’un noir pur. Pour des ombres colorées (effet néon, drop shadow créatif), utiliser la couleur de l’élément avec une opacité de 30 à 70 %.
Inset (ombre intérieure)
Le mot-clé inset inverse l’ombre : au lieu d’apparaître autour de l’élément, elle apparaît à l’intérieur. Utilisée pour simuler un enfoncement, un champ de formulaire creusé, ou l’effet « pressed » d’un bouton.
Pourquoi empiler plusieurs ombres ?
CSS permet d’empiler autant d’ombres que nécessaire en les séparant par des virgules. Cette technique est essentielle pour reproduire des effets réalistes et des design systems modernes :
- Material Design : combine une ombre nette et rapprochée avec une ombre plus diffuse et plus éloignée, pour simuler la lumière ambiante et la lumière directe.
- Neumorphisme : empile une ombre claire et une ombre sombre de part et d’autre de l’élément, créant un effet de volume « gonflé » ou « enfoncé ».
- Bordures colorées : une ombre à offset 0 et spread positif remplace avantageusement une bordure classique (pas de décalage du layout).
- Halo et glow : plusieurs ombres de même couleur avec des blurs croissants créent un effet néon progressif.
Exemples de presets courants
| Nom | CSS | Effet |
|---|---|---|
| Soft | 0 4px 12px rgba(0,0,0,0.1) | Carte discrète, cards légères |
| Medium | 0 8px 24px -2px rgba(0,0,0,0.15) | Carte mise en avant, modal |
| Hard | 0 12px 32px rgba(0,0,0,0.25) | Popover, dropdown flottant |
| Material 1dp | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) | Material Design niveau 1 |
| Neon | 0 0 30px 6px rgba(247,55,96,0.7) | Effet néon coloré |
| Inset | inset 0 2px 8px rgba(0,0,0,0.2) | Champ de formulaire creusé |
Performance et bonnes pratiques
Attention au blur élevé
Les ombres avec un blur très élevé (> 50 px) peuvent ralentir le scroll et les animations sur mobile. Si votre page contient beaucoup d’éléments ombrés, préférez un blur modéré (10 à 30 px) et utilisez plusieurs calques subtils plutôt qu’une seule ombre massive.
Préférer des variables CSS
Dans un design system, définir des variables CSS pour vos ombres facilite la cohérence :
–shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
–shadow-md: 0 4px 12px rgba(0,0,0,0.1);
–shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
–shadow-xl: 0 16px 40px rgba(0,0,0,0.2);
}
Transition au hover
Animer l’ombre au hover donne un effet premium. Définir une transition CSS et augmenter le blur et l’offset au hover simule un élément qui « s’élève » :
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
transform: translateY(-4px);
}
Foire aux questions
Quelle différence entre box-shadow et filter: drop-shadow ?
box-shadow s’applique sur le rectangle de l’élément (et suit le border-radius). filter: drop-shadow() s’applique sur les contours réels du contenu, y compris les éléments transparents (SVG, PNG avec alpha). Utiliser drop-shadow pour ombrer une icône SVG qui n’est pas rectangulaire, et box-shadow pour tout le reste.
Une ombre peut-elle dépasser du parent ?
Oui, sauf si le parent a overflow: hidden, overflow: auto ou un transform, qui coupent le débordement. Dans ces cas, l’ombre est tronquée aux limites du parent. Éviter ces propriétés sur les conteneurs de cartes ombrées.
Peut-on animer une ombre ?
Oui, box-shadow est animable avec transition et animation. Les performances sont correctes tant que le blur reste raisonnable. Pour des animations très fluides, certains préfèrent animer une pseudo-classe ::after plutôt que l’ombre directement.
L’outil supporte-t-il le mode inset ?
Oui. Chaque calque d’ombre dispose d’une case à cocher « Inset » qui inverse l’ombre vers l’intérieur. Utile pour simuler un enfoncement ou une surface creusée.
