Créer un box-shadow CSS avec des curseurs et prévisualiser sur un élément en direct
Un générateur de box-shadow vous laisse concevoir une ombre CSS avec des curseurs et un aperçu en direct, puis copier la valeur box-shadow exacte dans votre feuille de styles. Les ombres CSS sont contrôlées par une poignée de nombres — décalage horizontal et vertical, rayon de flou, étalement, et une couleur — et leur relation est difficile à imaginer depuis le seul code. Glisser un curseur et regarder l'ombre changer sur un élément témoin est bien plus rapide que d'éditer des nombres à l'aveugle et recharger pour voir le résultat.
De bonnes ombres donnent à une interface plate une sensation de profondeur et de hiérarchie : une ombre subtile et douce soulève une carte de la page, tandis qu'une plus serrée et sombre suggère un bouton que l'on peut presser. L'astuce que la plupart manquent, c'est que la profondeur réaliste vient d'ombres douces et peu opaques plutôt que noires et lourdes — et le générateur facilite le réglage de cette douceur à l'œil. Il prend aussi en charge les ombres internes (inset). Cet outil produit du CSS basé sur les standards dans votre navigateur, prêt à coller sur boutons, cartes, modales et champs.
Dans l'ordre : décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement, et couleur. Les décalages déplacent l'ombre, le flou adoucit son bord, l'étalement l'agrandit ou la réduit, et la couleur (souvent peu opaque) fixe son intensité. Un mot-clé optionnel « inset » dessine l'ombre à l'intérieur de l'élément.
Utilisez un flou doux et une couleur peu opaque plutôt que du noir plein, et gardez le décalage vertical plus grand que l'horizontal pour imiter une lumière du dessus. Des ombres subtiles et douces se lisent comme une profondeur naturelle ; les lourdes et sombres paraissent artificielles.
Ajouter le mot-clé inset dessine l'ombre à l'intérieur de l'élément au lieu de l'extérieur, créant un aspect interne et creusé — utile pour boutons pressés, champs de saisie ou effets gravés. Les mêmes valeurs de décalage, flou et étalement s'appliquent, mais tournées vers l'intérieur.
Oui. CSS permet d'empiler plusieurs box-shadow sur un élément en les séparant par des virgules, c'est ainsi qu'on bâtit souvent une profondeur réaliste — en combinant une ombre serrée et sombre avec une plus large et douce. La valeur générée peut contenir plusieurs couches.
Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur d'animations CSS · Générateur de filtres CSS