Générateur d’ombre CSS
Composer un box-shadow avec aperçu en direct.
Données d’entrée
Cet outil fonctionne entièrement dans votre navigateur. Les données saisies ou chargées ne sont jamais envoyées.
Résultat
Saisissez vos données, puis lancez l’outil.
À propos de cet outil
Règle le décalage, le flou, l’étalement, la couleur et l’ombre intérieure d’un box-shadow, avec un aperçu immédiat et plusieurs ombres empilables.
Comment l’utiliser
- Ajustez les curseurs et choisissez la couleur.
- Copiez la déclaration CSS produite.
Questions fréquentes
Comment obtenir une ombre réaliste ?
Un flou large avec un faible décalage et une couleur sombre très transparente imite mieux la lumière réelle.
Plusieurs ombres sont-elles possibles ?
Oui, séparez-les par des virgules : la première est dessinée au-dessus des suivantes.
Pour aller plus loin
Outils liés
Générateur de border-radius
Arrondir les coins d’un élément, y compris en ellipse.
Générateur de dégradé CSS
Créer un dégradé linéaire ou radial en CSS.
Bac à sable Flexbox
Tester les propriétés flex sans écrire de CSS.
HEX vers RGB
Convertir une couleur HEX en valeurs RGB.
RGB vers HEX
Convertir des valeurs RGB en code HEX.
RGB vers HSL
Passer d’une couleur RGB à sa teinte, saturation et luminosité.