Générateur CSS Box Shadow
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
Une déclaration box-shadow a six composantes mobiles — décalages X et Y, flou, étalement, couleur et le mot-clé optionnel inset — et la seule façon de les régler correctement est de les voir. Ce générateur place chaque composante sur un curseur et restitue le résultat sur une carte d'aperçu pendant que vous faites glisser, de sorte que la ligne CSS en bas est toujours exactement ce que vous regardez.
Les ombres du monde réel sont rarement une couche unique. La liste des couches vous permet d'empiler jusqu'à quatre ombres dans une seule déclaration : une ligne sombre serrée pour la définition des bords plus un lavis large et doux pour l'élévation, ou la paire clair-foncé qui définit le néomorphisme. Sélectionnez une couche pour l'éditer, supprimez celles dont vous n'avez pas besoin, et la valeur box-shadow combinée se met à jour en direct.
Les ombres se lisent très différemment sur les interfaces sombres, où une ombre noire sur une page presque noire disparaît tout simplement. Le bouton de changement d'arrière-plan de l'aperçu bascule le fond entre clair et foncé afin que vous puissiez vérifier les deux thèmes avant de livrer. Les pages de préréglages couvrent les variantes que les gens recherchent réellement : une ombre d'élévation douce, un creux intérieur, la recette néomorphique à deux couches et une ombre de carte subtile.
Comme tous les outils de ce site, le générateur est gratuit et fonctionne entièrement dans votre navigateur : pas de téléchargement, pas de compte, et il continue de fonctionner hors ligne une fois la page chargée.