Ombre CSS douce — Code prêt à l'emploi
Créez du code CSS box-shadow visuellement : des curseurs pour le décalage, le flou, l'étalement, la couleur avec opacité, le mode inset et jusqu'à quatre couches avec un aperçu en direct.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de box-shadow préchargé avec une ombre douce : pas de décalage horizontal, 8px vers le bas, un flou généreux de 24px et une faible opacité du noir à 12 %. La carte d'aperçu l'affiche immédiatement — déplacez n'importe quel curseur et la ligne CSS suit en temps réel.
Les ombres douces sont le cheval de bataille des interfaces modernes. Un flou important associé à une faible opacité soulève une carte de la page sans dessiner de contour dur, c'est pourquoi la plupart des design systems maintiennent leurs ombres d'élévation exactement dans cette plage plutôt que d'utiliser les ombres denses et sombres des débuts du flat design.
Copiez la ligne box-shadow directement dans votre feuille de styles, ou empilez jusqu'à trois couches supplémentaires pour une élévation plus riche. Le générateur fonctionne entièrement dans votre navigateur — rien n'est téléchargé où que ce soit.