Générateur de box-shadow CSS

La propriété CSS `box-shadow` ajoute un ou plusieurs effets d'ombre à un élément HTML. Chaque ombre est définie par jusqu'à six valeurs : un mot-clé optionnel `inset`, un décalage horizontal, un décalage vertical, un rayon de flou, un rayon d'extension et une couleur. Les décalages horizontaux positifs déplacent l'ombre vers la droite ; les décalages verticaux positifs la déplacent vers le bas. Les ombres multiples sont séparées par des virgules et rendues de l'avant vers l'arrière. C'est le mécanisme CSS principal pour ajouter une profondeur visuelle, une hiérarchie d'élévation, des effets de lueur et un style neumorphique aux composants d'interface, sans aucune image.

La syntaxe complète est : `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Seuls `offset-x`, `offset-y` et `color` sont obligatoires ; `blur-radius` et `spread-radius` valent 0 par défaut si omis, et `inset` produit une ombre extérieure par défaut. Une ombre de carte typique ressemble à : `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Empilez un nombre illimité d'ombres en les séparant par des virgules — elles sont rendues de l'avant vers l'arrière (la première listée est au premier plan). Ce générateur produit la déclaration complète incluant le nom de propriété `box-shadow:`, ou seulement la valeur si vous le préférez.

Le rayon de flou contrôle la douceur des bords : zéro donne un bord dur et net qui correspond exactement à la forme de l'élément ; des valeurs plus grandes créent un fondu progressif et plus diffus. Le rayon d'extension agrandit ou réduit l'ombre entière avant que le flou soit appliqué : des valeurs positives l'étendent au-delà de la bordure de l'élément, des valeurs négatives la contractent vers l'intérieur. Les ombres aux proportions les plus réalistes utilisent un flou modéré avec une extension légèrement négative, maintenant l'ombre proche de l'empreinte de l'élément plutôt que de trop s'étendre. C'est la technique utilisée dans les préréglages Deep et Floating.

Ajoutez le mot-clé `inset` au début de la déclaration d'ombre : `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Une ombre inset est dessinée à l'intérieur de la boîte de bordure de l'élément plutôt que derrière lui, créant un aspect en retrait ou enfoncé. Les usages courants incluent : les champs de saisie (montrant la profondeur du focus), les pistes de commutateurs, les états actifs des boutons, et les conteneurs de texte en relief. Ce générateur dispose d'un bouton Inset dans le panneau de contrôle de chaque couche — activez-le et l'ombre bascule immédiatement vers l'intérieur de l'élément en prévisualisation.

Oui — le CSS autorise un nombre quelconque d'ombres séparées par des virgules sur un seul élément. Elles sont rendues dans l'ordre indiqué, la première ombre étant au premier plan. La superposition de plusieurs couches est la technique clé pour une profondeur lisse et réaliste — une seule grande ombre paraît artificielle, tandis que trois à cinq couches étagées imitent la façon dont la lumière se disperse physiquement. Ce générateur prend en charge jusqu'à huit couches indépendantes, chacune avec ses propres décalages, flou, extension, couleur, opacité et bascule inset. Une icône œil permet d'afficher ou masquer chaque couche pour une comparaison avant/après rapide sans les supprimer.

Le neumorphisme utilise deux ombres opposées sur un élément dont la couleur de fond correspond à celle de la page : une ombre claire (quasi-blanche) pointant vers le haut à gauche, une ombre sombre (noire à faible opacité) pointant vers le bas à droite. Cela donne l'impression que l'élément est extrudé de la surface de fond. Une déclaration neumorphique classique : `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. Le fond de l'élément doit correspondre exactement au fond de la page pour que l'illusion fonctionne. Le préréglage Neumorphic de ce générateur fournit un point de départ prêt à l'emploi — passez le fond de prévisualisation sur "Gris doux" pour le voir en contexte.

Utilisez un décalage nul, un grand rayon de flou et une valeur colorée : `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. Un décalage nul fait rayonner la lueur uniformément dans toutes les directions. Une extension positive éloigne davantage la lueur de l'élément. Combiner deux couches — une avec un flou plus petit et une opacité plus élevée pour un noyau brillant, et une avec un grand flou et une opacité plus faible pour le halo ambiant — produit un effet lumineux plus convaincant. Le préréglage Glow Blue illustre cette approche avec deux couches. Changez la couleur pour obtenir des lueurs d'accent personnalisées.

Au lieu d'une seule grande ombre, superposez trois à cinq couches où chacune double approximativement le décalage et le flou tout en réduisant l'opacité de moitié : par exemple, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Cette technique imite la façon dont la lumière se disperse physiquement depuis une source ponctuelle et reste convaincante à tout niveau de zoom ou résolution d'affichage. Les préréglages Deep et Floating de ce générateur reposent exactement sur ce principe — trois couches étagées qui semblent naturelles à toute échelle.

`box-shadow` suit toujours la boîte de bordure rectangulaire de l'élément, quel que soit son aspect visuel. `filter: drop-shadow()` trace le contour réel du canal alpha de l'élément — utile pour les PNG transparents ou les découpes SVG lorsque vous souhaitez que l'ombre suive la forme plutôt que son rectangle de délimitation. Pour les composants d'interface standard (cartes, boutons, panneaux, dialogues), `box-shadow` est le bon outil : il est plus rapide à peindre, prend en charge le mode inset, accepte le rayon d'extension et autorise plusieurs couches superposées. Utilisez `filter: drop-shadow()` uniquement lorsque le fond transparent de l'élément est important pour la forme de l'ombre.

Non. `box-shadow` est purement un effet visuel rendu en dehors du flux de mise en page normal. Il ne repousse jamais les éléments frères, n'augmente jamais la zone de contenu défilable, et n'a aucun effet sur la largeur, la hauteur, la marge ou le rembourrage calculés de l'élément. Les ombres s'étendent visuellement au-delà de la boîte de l'élément mais sont ignorées par le moteur de mise en page. Cela signifie que vous pouvez ajouter des ombres généreuses à une grille très serrée sans casser la mise en page — même si vous souhaiterez peut-être ajouter `overflow: visible` sur le conteneur parent pour vous assurer que l'ombre n'est pas coupée.

Une fois votre ombre construite, le générateur propose trois formats de sortie. <strong>Copier CSS</strong> donne la déclaration de propriété complète (`box-shadow: …;`) prête pour n'importe quelle feuille de style. <strong>Copier la valeur</strong> donne uniquement la valeur de l'ombre — utile comme variable SCSS, valeur de propriété personnalisée CSS ou entrée `extend.boxShadow` de Tailwind. <strong>Style React</strong> génère le format camelCase (`boxShadow: '…'`) pour les objets de style JSX inline ou les Styled Components. Pour Tailwind, collez la valeur dans votre `tailwind.config.js` sous `theme.extend.boxShadow` pour créer une classe utilitaire d'ombre personnalisée.

La plupart des outils dédiés au box-shadow proposent uniquement la génération en une seule couche — cssgenerator.org, par exemple, fournit des contrôles basiques mais sans bibliothèque de préréglages ni superposition multi-couches. La référence de css-tricks.com est de la documentation, pas un outil interactif. Les générateurs CSS de cssmatic.com sont fonctionnels mais vieillissants et chargés de publicités. Le générateur d'UtiloKit prend en charge jusqu'à huit couches indépendantes avec des bascules de visibilité par couche, huit préréglages soigneusement sélectionnés couvrant les patrons de design d'ombres les plus courants (carte, crisp, material, neumorphique, floating, deep, lueur, inset), trois formats de sortie pour différents frameworks, et un bouton de bascule fond sombre/clair pour la vérification du contraste — le tout sans publicité et sans aucun téléchargement de données.

Oui — le générateur de box-shadow est entièrement responsive. Sur iPhone et Android, tous les curseurs sont adaptés au tactile avec des poignées de taille appropriée. L'élément de prévisualisation en direct s'adapte aux écrans mobiles. Les sélecteurs de couleur utilisent le sélecteur de couleur natif du système sur les navigateurs mobiles. La disposition à trois colonnes du bureau se réduit à une disposition verticale en une seule colonne sur les écrans étroits. Tous les boutons de copie utilisent l'API Web Clipboard, prise en charge par Safari, Chrome et Firefox sur iOS et Android. Aucun téléchargement d'application n'est requis, aucun compte n'est nécessaire — ouvrez l'URL et commencez à créer.