Générateur de Box Shadow
Le générateur de box-shadow crée une ombre CSS avec des curseurs pour le décalage X et Y, le flou, l’étendue, la couleur, l’opacité et l’option inset, plus des préréglages Material Design et Tailwind, et fournit le CSS exact.
À propos de cet outil
Le générateur de box-shadow crée une ombre CSS avec des curseurs pour le décalage X et Y, le flou, l’étendue, la couleur, l’opacité et l’option inset, plus des préréglages Material Design et Tailwind, et fournit le CSS exact.
Mode d’emploi
- Partez d’un préréglage ou restez sur Personnalisé.
- Réglez le décalage X/Y, le flou, l’étendue et l’opacité.
- Choisissez la couleur de l’ombre et cochez Inset pour une ombre intérieure.
- Cliquez sur Copier le CSS pour coller la règle box-shadow.
Bon à savoir
- La syntaxe de box-shadow est : [inset] offset-x offset-y blur-radius spread-radius color.
- Un rayon de flou plus grand adoucit le bord ; l’étendue (spread) agrandit ou réduit l’ombre avant le flou.
- Des ombres sombres à faible opacité (environ 10–25 %) paraissent plus naturelles qu’un noir plein.
- Plusieurs ombres peuvent être superposées en les séparant par des virgules.
- Le mot-clé inset dessine l’ombre à l’intérieur de la bordure de l’élément.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment ajouter une ombre à une div en CSS ?
Utilisez la propriété box-shadow, par exemple box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); cet outil écrit la valeur pour vous.
Quelle est la différence entre blur et spread ?
Le flou (blur) détermine la douceur du bord de l’ombre. L’étendue (spread) agrandit ou réduit la taille de l’ombre avant l’application du flou.
Comment créer une ombre intérieure ?
Ajoutez le mot-clé inset au début de la valeur, ou cochez Inset dans l’outil.
Peut-on utiliser plusieurs box-shadows ?
Oui. Séparez les ombres par des virgules ; les ombres superposées, comme dans les préréglages Material et Tailwind, paraissent plus réalistes.