Générateur de Box Shadow

Une box-shadow CSS se compose de cinq parties, et chaque curseur de cet outil correspond à l'une d'elles. Le décalage X déplace l'ombre vers la gauche ou la droite, et le décalage Y la déplace vers le haut ou le bas, si bien qu'un Y positif fait tomber l'ombre sous l'élément comme une lumière zénithale. Le rayon de flou détermine la douceur du bord : zéro donne une ligne nette et dure, tandis qu'une valeur plus élevée l'étale en une brume diffuse. L'étalement (spread) agrandit ou réduit l'ombre avant l'application du flou. La couleur, avec son opacité, est produite sous forme de valeur rgba() afin que la transparence soit directement intégrée. Un sixième mot-clé, inset, inverse toute l'ombre vers l'intérieur pour un effet enfoncé. Ajustez chaque curseur ci-dessus et l'aperçu en direct se met à jour instantanément, afin que vous puissiez voir exactement comment chaque valeur modifie le résultat avant de copier le code.

En CSS, on place plusieurs ombres dans une seule règle box-shadow en les séparant par des virgules, et elles s'affichent de l'avant vers l'arrière, la première ombre se retrouvant donc au-dessus. Cet outil gère cela pour vous : vous ajoutez un nouveau calque, et il gère automatiquement la syntaxe séparée par des virgules. L'empilement est la clé d'une profondeur réaliste, car une ombre unique paraît plate alors que deux ou trois ombres à des décalages, flous et opacités différents imitent la façon dont la lumière tombe réellement. Vous pouvez réorganiser les calques, en dupliquer un comme point de départ, et activer ou désactiver n'importe quel calque pour comparer les rendus sans le supprimer. Les préréglages d'élévation Material utilisent exactement cette approche, empilant deux ou trois calques par niveau comme le fait la spécification de Google. Construisez votre empilement avec les contrôles de calque ci-dessus, puis copiez la règle combinée en un clic.

L'étalement (spread) agrandit ou réduit une ombre avant l'application du flou. Un étalement positif rend l'ombre plus grande que l'élément, tandis qu'un étalement négatif la rétrécit vers l'intérieur pour qu'elle se resserre sous l'élément. L'étalement négatif est l'astuce derrière les ombres de carte modernes : en resserrant l'ombre et en la poussant vers le bas avec un léger décalage Y, on obtient une flaque d'ombre douce directement sous la carte, plutôt qu'un halo flou qui déborde de tous les côtés. Le résultat évoque une élévation subtile et ancrée plutôt qu'une ombre portée datée. Associer une couleur à faible opacité avec un étalement négatif et un flou modéré est la recette qu'utilisent la plupart des systèmes de design pour des cartes propres et surélevées. Le curseur d'étalement ici va de -50px à 50px : réglez une valeur négative, observez l'aperçu se resserrer, et copiez le résultat directement dans votre feuille de style.

Le neumorphisme, ou soft UI, est un style où les éléments semblent extrudés depuis l'arrière-plan plutôt que flotter au-dessus, comme s'ils étaient façonnés dans la même matière. L'effet nécessite deux ombres sur une seule couleur de surface : une ombre sombre d'un côté et un reflet clair du côté opposé, de sorte que l'élément paraisse légèrement en relief. Obtenir cette paire correctement à la main est délicat, car les deux ombres doivent dériver de la même couleur de base. Le mode Neumorphisme dédié de cet outil fait le calcul pour vous : définissez une couleur de base, une intensité, une distance et un flou, et il calcule automatiquement la paire d'ombres claire et sombre correspondante. Vous pouvez la prévisualiser sur une carte, un bouton ou un avatar, et basculer entre arrière-plans clair et sombre pour vérifier le contraste. Ouvrez le mode soft-UI ci-dessus, ajustez la couleur de base, et copiez la paire d'ombres générée.

Oui. Le générateur produit la même ombre dans cinq formats prêts à copier, pour qu'elle s'intègre directement à votre stack. Vous obtenez du CSS brut sous forme de règle box-shadow prête à coller, une classe Tailwind à valeur arbitraire au format shadow-[...], une variable SCSS réutilisable dans vos partials, un template littéral styled-components pour le CSS-in-JS, et des design tokens en JSON au format standard des tokens pour les pipelines de systèmes de design. Vous pouvez copier la règle complète, copier uniquement la valeur brute lorsque vous n'avez besoin que de la partie après la propriété, ou télécharger le résultat sous forme de fichier. Un historique intégré conserve jusqu'à 20 de vos états récents, pour que vous puissiez revenir à une version antérieure sans refaire votre travail. Construisez l'ombre souhaitée ci-dessus, choisissez le format adapté à votre projet, et récupérez le code en un clic.