Un souci avec cet outil ?
À propos de « CSS Box Shadow Generator Online »
Cet outil construit visuellement des valeurs CSS box-shadow avec des curseurs pour décalage, flou, étalement, couleur et opacité. L'ombre se met à jour en temps réel et vous copiez le CSS correspondant.
Les box-shadows donnent de la profondeur, détachent les éléments du fond et signalent l'interactivité (hover, pressed, focus). Les ombres multi-couches simulent un éclairage complexe (élévation Material Design, neumorphisme).
Pour les cartes, modales, popovers, boutons et tout élément d'UI qui doit « décoller ». L'outil exporte box-shadow classique, multi-couches et combinaisons modernes d'offset/flou.
Comment utiliser cet outil
Construire une déclaration CSS box-shadow
Décalages
« X offset (px) » et « Y offset (px) » déplacent l’ombre horizontalement (positif = droite) et verticalement (positif = bas). Le défaut CSS est sans décalage ; les ombres de carte typiques utilisent un Y de `4` environ et un X proche de 0.
Flou et couleur
« Blur (px) » règle la douceur — 0 = bords nets, 10+ = flou. « Color » accepte toute couleur CSS, dont rgba/hex avec alpha. Pour des ombres UI discrètes, `rgba(0,0,0,0.15)` + flou modéré.
Exécuter
Résultat : champ unique `css` — `<x>px <y>px <blur>px <color>`. À coller comme valeur de `box-shadow:`. Pas de spread ni d’inset en sortie ; la syntaxe les permet mais l’outil reste sur 4 arguments.
Empilage d’ombres
Les designs réels empilent souvent 2-3 ombres séparées par des virgules (une longue douce + une courte serrée) pour la profondeur. Générez chacune avec l’outil et concatenez à la main dans un seul `box-shadow:`.