6XC

Générateur d'ombre CSS (box-shadow)

Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct.

812 vues

La propriété box-shadow

Syntaxe : box-shadow: x y flou étalement couleur. Les décalages déplacent l'ombre, le flou adoucit son bord, l'étalement l'agrandit ou la rétrécit, et la couleur porte généralement un alpha (ex. rgba(0,0,0,0.15)) pour plus de réalisme. Ajoutez inset pour dessiner l'ombre à l'intérieur de la boîte. Des ombres douces à faible opacité avec un petit décalage y paraissent les plus naturelles.

Questions fréquentes

Quelle est la différence entre flou et étalement ?

Le flou adoucit le bord de l'ombre sans changer sa taille ; l'étalement agrandit (ou rétrécit avec des valeurs négatives) l'ombre dans toutes les directions avant l'application du flou.

Comment créer une ombre élégante et moderne ?

Gardez x à 0, y petit (2-8px), un flou généreux (10-30px) et une opacité faible (0,08-0,2). Superposer deux ombres — une resserrée, une large — ajoute de la profondeur.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer Générateur CSS de glassmorphism Concevez un effet de verre (glassmorphism) avec aperçu en direct — ajustez le flou, la transparence, la teinte et la bordure, puis copiez le CSS. Lancer