DESIGN

Ombre CSS

Ajuste les réglages pour créer une ombre portée et récupérer son code CSS box-shadow.

Emplacement publicitaire — bannière (728×90)
Décalage X
Décalage Y
Flou
Étalement
Couleur
Opacité (%)
Clique sur générer

Quand s'en servir ? Régler visuellement une ombre portée CSS et récupérer le code exact, plutôt que de deviner les valeurs à la main.

Questions fréquentes

Que change l'étalement (spread) par rapport au flou ?

Le flou adoucit les bords de l'ombre ; l'étalement agrandit ou réduit la taille de l'ombre elle-même avant l'application du flou, un peu comme si on redimensionnait la forme d'origine.

Comment ajouter plusieurs ombres en CSS ?

En séparant plusieurs valeurs `box-shadow` par des virgules dans la même propriété — cet outil génère une seule ombre à la fois, à combiner manuellement si besoin.

Emplacement publicitaire — bannière basse (728×90)

Cet outil fait partie de Quiko, une collection de 100 générateurs gratuits.