Générateur d’ombres CSS
Créer une ombre CSS (box-shadow)
Fonctionne dans votre navigateur · Aucun envoi
L’outil et les instructions de cette page sont en anglais pour le moment. Il fonctionne de la même façon : tout se passe dans votre navigateur.
Shadow layers
Box and background
Ready-made
Votre navigateur est trop ancien pour cet outil. Mettez-le à jour, ou utilisez une version récente de Chrome, Edge, Firefox ou Safari.
- Rien ne quitte votre appareil
- Aucune limite de taille imposée par un serveur
- Sans inscription, sans filigrane
- Gratuit
How to make a box shadow
- Start from a ready-made shadow, or adjust the sliders.
- Add layers: a tight shadow plus a wide, soft one looks most natural.
- Copy the CSS.
Tips
- Low opacity (8 to 20%) and a negative spread give soft, modern shadows.
- Inset shadows look pressed in, for inputs and toggles.
- Change the box and background colors to see the shadow on your own design.
Questions fréquentes
Does box-shadow slow down a page?
Rarely. Very large blurs on many moving elements can, so keep animated shadows simple.
Is anything uploaded?
No. The preview is drawn by your browser.