Générateur de box-shadow CSS
Faites glisser les curseurs ou choisissez un préréglage — voyez l’ombre sur une carte en direct et copiez le CSS box-shadow en un clic.
Préréglages
Couches
0px
8px
24px
-8px
#000000
15%
Mode d’emploi
- Une ombre douce est déjà sur la carte — faites glisser un curseur (décalage X/Y, flou, diffusion), choisissez une couleur et une opacité, ou cochez Inset pour une ombre intérieure. Tout se met à jour en direct, sans bouton à presser.
- Cliquez sur une pastille de préréglage (Flottement doux, Relèvement marqué, Ombre intérieure, Lueur néon, Double, Neumorphisme) pour charger instantanément un rendu prêt à l’emploi.
- Ajoutez des couches avec « + » pour empiler les ombres ; chaque couche se modifie indépendamment. Copiez la déclaration box-shadow complète en un clic.
Exemple
Préréglage
Flottement doux
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Copiez-la directement dans n’importe quel sélecteur, par exemple .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. Le préréglage « Double » produit deux ombres séparées par une virgule ; « Neumorphisme » exige un fond clair pour être lisible.
Portée, limites et questions courantes
- box-shadow uniquement : pas de filtre drop-shadow(), pas de text-shadow, et le CSS n’a pas d’ombres en dégradé — tout cela sort du cadre.
- La couleur vient du sélecteur et d’un curseur d’opacité ; nous n’analysons pas de chaînes CSS collées, il n’y a donc rien à mal saisir ni à mal lire.
- Le neumorphisme dépend d’une surface claire — sur des fonds très sombres, son effet peut être invisible. C’est une propriété du style, pas un bogue.
- Rien n’est enregistré ni partagé par un paramètre dans le lien : rafraîchissez et vous revenez au Flottement doux par défaut. Tout s’exécute dans votre navigateur.
Outils associés
Quand vous voulez aller plus loin avec les couleurs ou les ombres.