Générateur de Box Shadow CSS
Concevez des ombres de boîte CSS avec un aperçu en direct et un code prêt à copier.
Réponse rapide: Générateur CSS box-shadow : créez des ombres CSS avec aperçu en direct et code prêt à copier. Fonctionne entièrement dans votre navigateur, gratuitement et sans inscription.
Dernière mise à jour
Bon à savoir
The CSS box-shadow property takes up to four length values in a fixed order — horizontal offset, vertical offset, blur radius, spread radius — followed by a color. The order matters and is easy to misremember: a positive vertical offset pushes the shadow down, and the blur radius softens the edge while the spread radius grows or shrinks the whole shadow before it is blurred. Dragging the sliders here removes the guesswork and shows the result instantly.
For realistic depth, keep shadows subtle: a small offset, a generous blur and a low opacity read as a natural drop shadow, whereas a hard, opaque shadow looks like a 1990s bevel. A widely used technique is to stack several shadows with increasing blur to mimic how light actually diffuses — you can do that by pasting multiple declarations separated by commas, since a single box-shadow accepts a comma-separated list.
Two things to know: adding the inset keyword flips the shadow to the inside of the element, which is handy for pressed-button and inset-field effects, and box-shadow does not affect layout or the element's box size the way border does, so it never nudges neighboring elements. For rounded corners that the shadow will follow, pair this with the border-radius generator, and check any shadowed text stays legible with the contrast checker.
Questions fréquentes
- Le générateur de box-shadow est-il gratuit ?
- Oui — gratuit, sans inscription.
- Puis-je ajouter plusieurs ombres ?
- Le générateur émet une seule ombre ; combinez la sortie avec des virgules si vous avez besoin d'ombres superposées.
- Quelle unité utilise-t-il ?
- Pixels — l'unité la plus courante pour les décalages de box-shadow.
- La sortie prend-elle en charge inset ?
- Pas dans cette version — définissez inset manuellement sur le CSS résultant si vous en avez besoin.
- Mes paramètres sont-ils enregistrés ?
- Non — l'aperçu et le CSS fonctionnent entièrement dans votre navigateur.