Générateur CSS box shadow

Faites glisser les curseurs pour façonner votre ombre — décalage, flou, étalement, couleur et inset — empilez autant de couches que vous le souhaitez, puis copiez le CSS. Tout se met à jour en direct dans votre navigateur.

Aperçu
Couleur du bloc
Couleur de page
Couches d'ombre
CSS généré

Tout fonctionne dans votre navigateur. Rien n'est envoyé.

Comment ça marche

STEP 1

Façonnez l'ombre

Faites glisser les curseurs de décalage, de flou et d'étalement, choisissez une couleur et une opacité, et activez Inset pour une ombre intérieure. Le bloc se met à jour au fur et à mesure.

STEP 2

Empilez les couches

Ajoutez d'autres couches pour créer une profondeur douce et superposée — chaque couche a sa propre ombre avec ses propres paramètres, combinées en une seule règle.

STEP 3

Copiez le CSS

Copiez la déclaration box-shadow prête à l'emploi en un clic et collez-la dans votre feuille de style — rien n'est envoyé.