Aller à l'outil
JoeLucky

Cliquez sur ★ pour enregistrer un outil

Catégories d'outils

Code en imageGénérateur de dégradés CSSGlassmorphism CSSGénérateur de box-shadowGénérateur de loaders CSSGénérateur de blobs SVGSVG en PNGVérificateur de contrasteConvertisseur PX / REM / EM
JoeLucky

Des outils en ligne pratiques, tous au même endroit

Politique de confidentialitéConditions d'utilisation

© 2026 JoeLucky®. Tous droits réservés.

  1. JoeLucky
  2. /CSS et design
  3. /Générateur de box-shadow

Générateur de box-shadow

Créez des ombres douces et superposées avec un aperçu interactif.

Aperçu
0px 4px 24px 0px

Modifier la couche sélectionnée

0px
4px
24px
0px
15%
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);

CSS ET DESIGN SIMILAIRES

Tout voir
Code en image

Transformez vos extraits de code en captures d'écran soignées.

Ouvrir →
Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques et copiez le CSS aussitôt.

Ouvrir →
Glassmorphism CSS

💬 Commentaires

?

Aucun commentaire pour le moment. Soyez le premier !

QU'EST-CE QUE Générateur de box-shadow ?

Le générateur d'ombre portée (box-shadow) vous permet d'ajuster les effets d'ombre en temps réel avec des curseurs, prend en charge plusieurs ombres superposées et propose 8 préréglages sélectionnés dont Material, Neumorphism et Neon — puis copiez le CSS instantanément.

Fonctionnalités

  1. 5 paramètres réglables : décalage X (gauche/droite), décalage Y (haut/bas), rayon de flou (douceur des bords), rayon d'étalement (taille globale) et opacité — chacun avec son propre curseur.
  2. Ombres multicouches : cliquez sur « Ajouter une couche d'ombre » pour empiler plusieurs ombres — les designs réels utilisent couramment 2–3 couches pour une profondeur plus naturelle (comme dans Material Design).
  3. Ombre intérieure (Inset) : activez Inset pour retourner l'ombre à l'intérieur de l'élément — idéal pour l'effet de bouton enfoncé ou les cartes en retrait.
  4. 3 arrière-plans d'aperçu : basculez entre fonds Clair, Sombre et Dégradé pour vérifier le rendu de l'ombre sur différentes surfaces.
  5. 8 préréglages sélectionnés : Flat, Subtle, Card, Material (3 couches), Dramatic, Neon Blue, Neumorphism et Inset.
  6. Copie CSS en un clic : obtenez la syntaxe complète box-shadow: ...; prête à coller dans n'importe quel fichier CSS, propriété style de Tailwind ou outil de design.

Comment l'utiliser ?

  1. Utilisez les curseurs pour régler le décalage, le flou, l'étendue et l'opacité — l'aperçu se met à jour instantanément.
  2. Pour une profondeur plus naturelle, ajoutez des couches d'ombre supplémentaires ou activez Inset pour une ombre intérieure.

Questions fréquentes

Quelles options le générateur de Box Shadow propose-t-il ?

Décalage X/Y, flou, étendue, couleur avec opacité, ombre intérieure et empilement de plusieurs couches.

Puis-je ajouter plusieurs ombres ?

Oui. Cliquez sur « Ajouter une ombre » pour empiler plusieurs couches de box-shadow.

Comment utiliser le CSS généré ?

Copiez le CSS de sortie et collez-le dans votre feuille de style ou dans un style en ligne.

Générez le code d'un flou d'arrière-plan et d'une bordure translucide en direct.

Ouvrir →
  • Cliquez sur copier et collez le CSS dans votre projet.