Générateur d'ombre de boîte CSS
Créez visuellement des ombres douces et réalistes au lieu de deviner les valeurs des pixels.
- Vos données ne quittent jamais votre appareil
- 100 % gratuit
- Sans inscription
- Fonctionne hors ligne après la première charge
Comment créer une ombre de boîte CSS
- Ajustez le décalage, le flou, la répartition, la couleur et l'opacité de chaque calque.
- Ajouter, dupliquer, masquer ou réorganiser des calques — ou choisissez un préréglage.
- Copiez le code CSS, Tailwind ou drop-shadow.
À propos : Générateur de box-shadow
Créer des ombres de boîte CSS visuellement.
Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.
Idéal pour
- Cartes, modaux et boutons
- Matériaux et designs néo-brutalistes
- Anneaux de mise au point et effets lumineux
Conseil : Utilisez un gris-bleu foncé au lieu du noir pur pour des ombres plus douces et plus naturelles.
Questions fréquentes
Comment créer une ombre réaliste ?
Empilez plusieurs couches molles qui se développent en offset et en flou. Utilisez « Smooth layered shadow » pour les construire automatiquement, ou commencez à partir des préréglages Floating ou Layered smooth.
Quelle est la différence entre box-shadow et drop-shadow ?
box-shadow suit la boîte de l’élément ; filtre : drop-shadow suit la forme réelle, donc il convient aux PNG transparents, aux icônes SVG et au texte.
Qu'est-ce que la propagation?
La propagation se développe (positive) ou rétrécit (négative) l'ombre avant de se brouiller — Une propagation négative maintient une ombre sous l'élément au lieu de l'entourer.
Puis-je utiliser plusieurs ombres à la fois ?
Oui. ajouter des calques — ils sont écrits comme une ombre de boîte séparée par des virgules, avec la première couche dessinée sur le dessus.
Est-ce que box-shadow ralentit une page ?
Les très gros flous sur de nombreux éléments, ou l'animation de l'ombre elle-même, peuvent être coûteux. — animer l'opacité ou transformer à la place.