Box Shadow Generator

Create elegant CSS shadows with a real-time preview. Adjust position, blur, spread, color and opacity, then export to CSS, SCSS or Sass.

Paramètres

Aperçu

Aperçu

Code


            
            
            

Guide d'utilisation

La propriété box-shadow ajoute une ou plusieurs ombres : box-shadow: x y blur spread color;. Le mot-clé inset place l'ombre à l'intérieur.

  • Blur : plus la valeur est haute, plus l'ombre est diffuse.
  • Spread : agrandit ou réduit l'ombre.
  • Astuce : superposez deux ombres pour un rendu premium.

FAQ

Comment créer une ombre douce ?

Utilisez un grand flou avec une faible opacité, par exemple box-shadow: 0 8px 24px rgba(15,23,42,0.08).

Peut-on cumuler plusieurs ombres ?

Oui, séparez chaque ombre par une virgule dans la même propriété box-shadow.