Générateur de box-shadow CSS
Créez une valeur box-shadow en ajustant le décalage, le flou, l'étalement et la couleur, avec plusieurs couches et préréglages.
Générateur de box-shadow CSS
Ajustez le décalage horizontal et vertical, le rayon de flou, le rayon d'étalement et la couleur, et cet outil assemble la déclaration box-shadow correspondante au fur et à mesure. Il est conçu pour le cas quotidien — une carte, un bouton, une modale qui a besoin de décoller de la page — ainsi que pour les ombres en couches composées de plusieurs ombres empilées ensemble, la technique derrière la profondeur douce et réaliste utilisée dans la plupart des systèmes de conception modernes.
Le menu déroulant des préréglages propose une élévation subtile, moyenne et intense, chacune avec son propre nombre de couches, décalage et flou déjà ajustés ; choisissez personnalisé pour contrôler chaque valeur vous-même. L'option de couches contrôle combien d'ombres s'empilent : chaque couche ajoutée augmente le décalage et le flou selon son index et réduit son opacité, transformant une seule ombre plate en une ombre douce et convaincante. Interne retourne l'ombre vers l'intérieur pour les éléments enfoncés, l'opacité contrôle la force de la couleur, et le commutateur d'unité produit px ou rem. Activez la variante en mode sombre pour une deuxième déclaration plus forte enveloppée dans un bloc @media (prefers-color-scheme: dark) — une ombre a besoin de plus d'opacité pour rester visible sur un fond sombre. Choisissez si le résultat est une seule ligne, une propriété personnalisée --box-shadow, ou une classe .box-shadow, et ajoutez une ligne filter: drop-shadow correspondante pour les éléments que box-shadow ne peut pas atteindre, comme une icône SVG ou un PNG transparent.
Chaque valeur est limitée à une plage raisonnable, et une couleur non reconnue revient au noir plutôt que du CSS cassé, donc le résultat s'insère toujours proprement dans une feuille de style.
Tout s'exécute dans votre navigateur au fur et à mesure que vous ajustez les contrôles — aucune couleur ou CSS généré n'est jamais envoyé nulle part. Copiez le résultat, téléchargez-le en tant que fichier .txt, ou envoyez-le dans un autre outil pour continuer à travailler dessus.