Générateur box-shadow CSS – Ombres en calques avec aperçu
Créez des ombres douces, dures, en calques ou intérieures avec des curseurs et un aperçu en direct, puis copiez un code box-shadow propre. Empilez jusqu’à six calques pour une profondeur réaliste.
Réglez les curseurs de décalage horizontal et vertical, de flou, d’étendue, de couleur et d’opacité : l’aperçu et le CSS se mettent à jour aussitôt. Cliquez sur + pour un autre calque, cochez « inset » pour une ombre intérieure ou choisissez un modèle comme Fluide (calques) ou Neumorphisme. Copiez ensuite la ligne box-shadow.
Comment utiliser : Générateur de box-shadow CSS
- Choisissez un modèle ou partez de l’ombre douce par défaut.
- Réglez le décalage, le flou, l’étendue et l’opacité.
- Ajoutez des calques avec + pour une profondeur plus douce.
- Adaptez le fond, la couleur de la boîte et l’arrondi.
- Copiez le CSS dans votre feuille de style.
La syntaxe de box-shadow
Une ombre s’écrit `box-shadow: x y flou étendue couleur`, avec le mot-clé `inset` facultatif au début. Plusieurs ombres sont séparées par des virgules et peintes de la première (au-dessus) à la dernière.
| Valeur | Effet |
|---|---|
| Décalage x / y | Déplace l’ombre vers la droite/le bas (négatif : gauche/haut) |
| Flou | Adoucit le bord ; 0 donne une ombre nette |
| Étendue | Agrandit ou réduit l’ombre avant le flou |
| Couleur | En général noir ou une teinte sombre peu opaque |
| inset | Dessine l’ombre à l’intérieur de l’élément |
Pourquoi les ombres en calques sont plus belles
Les objets réels projettent une ombre nette près d’eux et diffuse plus loin. Une seule grande ombre floue paraît souvent plate ou sale. Empiler plusieurs ombres dont le décalage et le flou doublent à chaque fois — 1, 2, 4, 8 et 16 px avec une faible opacité — produit la profondeur douce et naturelle des design systems modernes. C’est exactement ce que fait le modèle « Fluide (calques) ».
Conseils pour de belles ombres
- Gardez une opacité faible : 5 à 20 % de noir suffisent sur fond clair.
- Une étendue négative avec plus de flou fait « flotter » un élément.
- Teintez l’ombre avec la couleur du fond plutôt qu’en noir pur pour un rendu plus doux.
- Sur fond sombre, les ombres se voient à peine : préférez des surfaces plus claires ou des bordures.
- Pour les effets au survol, animez `transform` plutôt que l’ombre.
Neumorphisme et ombres intérieures
Le neumorphisme associe une ombre claire en haut à gauche et une ombre sombre en bas à droite sur un élément de la même couleur que le fond, comme s’il sortait de la surface. L’effet est frappant mais peu contrasté : évitez-le pour les boutons importants. Les ombres intérieures conviennent aux champs de formulaire et aux états enfoncés.
Outils CSS associés
Arrondissez les coins avec le Générateur de border-radius, créez des fonds avec le Générateur de dégradé CSS, des panneaux en verre avec le Générateur de glassmorphism et allégez la feuille de style finale avec le Minificateur et embellisseur CSS. Tout fonctionne dans votre navigateur.
Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.
Questions fréquentes
Comment ajouter une ombre à une div en CSS ?
Avec box-shadow, par exemple box-shadow: 0 10px 30px -5px rgba(0,0,0,.2). Copiez n’importe quelle ombre de ce générateur.
Peut-on utiliser plusieurs ombres ?
Oui, séparées par des virgules. Le générateur permet d’empiler jusqu’à six calques.
À quoi sert l’étendue (spread) ?
Elle agrandit (positive) ou réduit (négative) l’ombre avant l’application du flou.
Comment faire une ombre intérieure ?
Ajoutez le mot-clé inset ou cochez « Ombre intérieure » dans le générateur.
box-shadow modifie-t-il la mise en page ?
Non. Les ombres n’occupent pas d’espace et ne déplacent aucun élément.
Dernière mise à jour: