Générateur d'Ombre de Boîte CSS

Besoin d'ajouter de la profondeur ou de l'élévation à une carte, un bouton ou un panneau ? Le CSS Box Shadow Generator vous permet de créer des valeurs box-shadow visuellement : définissez le décalage, le flou, l'étalement, la couleur et l'optionnel inset, ajoutez plusieurs ombres et copiez le CSS en un clic.

Exemple : Choisissez le préréglage "Soft" pour une ombre portée subtile, ou "Layered" pour une profondeur plus réaliste. Ajustez le décalage et le flou avec les curseurs, choisissez une couleur (y compris la transparence) et utilisez "Inset" pour un aspect enfoncé ou récessé. L'aperçu se met à jour au fur et à mesure que vous changez les valeurs. Copiez le CSS et collez-le dans votre feuille de style.

Qu'est-ce que box-shadow ?

box-shadow est une propriété CSS qui dessine une ou plusieurs ombres derrière (ou à l'intérieur) d'un élément. Vous contrôlez le décalage horizontal et vertical, le rayon de flou, l'étalement, la couleur et si l'ombre est inset. Les ombres de boîte ajoutent de la profondeur et de la séparation sans balisage ou images supplémentaires, et elles fonctionnent dans tous les navigateurs modernes.

Pourquoi utiliser un générateur d'ombre de boîte ?

Itération plus rapide — Ajustez le décalage, le flou et la couleur avec des contrôles au lieu de modifier le CSS brut à la main.

Retour visuel — Voyez l'ombre sur une boîte d'aperçu afin d'obtenir le look souhaité avant de copier le code.

Ombres multiples — Empilez plusieurs ombres (par exemple, une ombre ambiante douce plus une plus nette) et copiez une seule déclaration box-shadow.

Préréglages — Commencez par Soft, Medium, Hard, Inset ou Layered et ajustez à partir de là.

Pas d'inscription — Gratuit, côté client, et fonctionne hors ligne une fois la page chargée.

Comment fonctionne l'outil

Utilisez l'aperçu pour voir l'ombre actuelle (et changez éventuellement l'arrière-plan de l'aperçu).
Modifiez chaque ombre : décalage X/Y, flou, étalement, couleur (sélecteur ou hex/rgba), et Inset.
Ajoutez ou supprimez des ombres pour créer des effets superposés.
Copiez le CSS à partir de la sortie et collez-le dans votre projet.
Essayez les préréglages (Soft, Medium, Hard, Inset, Layered) pour démarrer un style.

Syntaxe : box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Les ombres multiples sont séparées par des virgules.

Cas d'utilisation

Cartes et panneaux — Ombres douces pour soulever le contenu de la page.

Boutons — Profondeur subtile par défaut, ou inset pour un état enfoncé.

Modales et menus déroulants — Ombres superposées pour l'élévation et la séparation de l'arrière-plan.

Images — Une légère ombre pour encadrer ou faire flotter les images.

Questions Fréquemment Posées

Qu'est-ce que l'inset ?
Une ombre de boîte inset est dessinée à l'intérieur de la boîte de bordure de l'élément, comme un effet enfoncé ou pressé. Utilisez-la pour les entrées, les boutons enfoncés ou les panneaux enfoncés.

Puis-je utiliser plusieurs ombres ?
Oui. Ajoutez plus d'ombres avec "Add shadow." Elles s'empilent dans l'ordre ; la première est au-dessus. Combinez plusieurs ombres pour une profondeur superposée ou mélangez inset et outset.

Essayez le CSS Box Shadow Generator

CSS Box Shadow Generator

Generate CSS box-shadow values visually. Set offset, blur, spread, color, and inset. Add multiple shadows and copy the CSS instantly.

Try Tool Now

The CSS Box Shadow Generator is free, works in your browser, and requires no sign-up. Adjust offset, blur, spread, color, and inset, add multiple shadows if you like, and copy the CSS with one click — perfect for cards, buttons, and UI depth.

Related Tools

Gradient Generator — Create linear, radial, and conic CSS gradients
Color Contrast Checker — Check contrast ratios for accessibility
Color Shades Generator — Generate lighter and darker shades from a base color
Font Pairing — Preview and test typography combinations