Générateur d'ombre de boîte

Concevez des ombres de boîte en couches avec décalage, flou, répartition et couleur. Prévisualisez sur une carte, puis copiez le CSS en un clic.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Concevez des ombres de boîte en couches avec décalage, flou, répartition et couleur – aperçu en direct inclus.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Ajustez le décalage, le flou et la propagation.
Choisissez la couleur et l'opacité (ou ajoutez des calques).
Copiez le CSS box-shadow.

How this tool works

Ajustez le décalage, le flou et la propagation.
Choisissez la couleur et l'opacité (ou ajoutez des calques).
Copiez le CSS box-shadow.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez Box Shadow Generator chaque fois que vous en avez besoin : créez des ombres de boîte en couches avec décalage, flou, répartition et couleur - aperçu en direct inclus.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.