DevToolPal
FR

Générateur d'ombres CSS (box-shadow)

Créez des ombres CSS visuellement : empilez plusieurs couches, réglez décalage, flou, étendue, couleur et inset, avec aperçu en direct, préréglages et CSS prêt à copier.

Traitement local, rien n'est envoyé

Couches d'ombre

Aucune ombre. Ajoutez une couche ou choisissez un préréglage.

Aperçu

Couleur de la boîte
Arrière-plan

CSS

Préréglages
CSS du box-shadow
 
 
 
 
 
Ce que fait l’outil


Le générateur d’ombres vous permet de concevoir des ombres CSS à l’œil et de copier la déclaration box-shadow terminée. Empilez autant de couches que nécessaire, réglez pour chacune le décalage, le flou, l’étendue, la couleur et l’opacité, passez-la en ombre intérieure, et l’aperçu se met à jour instantanément. Vous pouvez aussi coller une valeur box-shadow existante pour la modifier visuellement. Tout s’exécute dans votre navigateur.


Mode d’emploi


    

  1. Partez d’un préréglage ou gardez l’ombre d’exemple.
    2. 

  2. Choisissez une couche avec les boutons Couche, ou + Ajouter une couche pour en empiler une autre.
    3. 

  3. Faites glisser Décalage horizontal, Décalage vertical, Flou et Étendue, choisissez une Couleur et baissez l’Opacité pour un rendu plus doux. Activez Intérieure pour une ombre vers l’intérieur.
    4. 

  4. Ajustez la Couleur de la boîte, l’Arrière-plan et le Rayon des coins de l’aperçu pour coller à votre page. Ils n’affectent que l’aperçu.
    5. 

  5. Copiez le code depuis la carte CSS.
    6. 



La zone CSS du box-shadow en bas est modifiable : collez une ombre depuis votre feuille de style ou votre outil de design et les réglages la reprennent. Les longueurs en rem ou em sont converties en px sur la base de 16px.


Exemple


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Conseils pour des ombres naturelles


    

  • Faible opacité. Un noir à 5–25 % paraît réaliste ; une ombre sombre et pleine paraît lourde.
    • 

  • Une étendue négative empêche un grand flou de déborder sur les côtés : c’est l’astuce de la plupart des ombres de « carte ».
    • 

  • Teintez l’ombre. Une ombre avec un peu de la teinte du fond ou de la marque est plus riche qu’un gris pur.
    • 

  • Une seule source de lumière. Gardez un décalage vertical positif sur toutes les couches pour qu’elles s’accordent sur la direction de la lumière.
    • 

  • Performances. De grands flous sur de nombreux éléments peuvent ralentir le défilement sur les téléphones modestes ; animez opacity ou transform plutôt que l’ombre elle-même.
    • 

 
  
 
FAQ
 
 
  › Que signifient les quatre nombres de box-shadow ?  
Dans l'ordre : décalage horizontal, décalage vertical, rayon de flou et rayon d'étendue. Des décalages positifs déplacent l'ombre vers la droite et vers le bas. Le flou adoucit le bord et ne peut pas être négatif. L'étendue agrandit l'ombre (positive) ou la réduit (négative) avant l'application du flou.
 
  › Pourquoi utiliser plusieurs couches d'ombre ?  
Les ombres réelles sont nettes près de l'objet et s'estompent au loin. Empiler deux couches ou plus, par exemple une petite ombre nette et une grande ombre douce, paraît bien plus naturel qu'un seul flou sombre. C'est ainsi que la plupart des design systems construisent leurs niveaux d'élévation.
 
  › À quoi sert inset ?  
inset dessine l'ombre à l'intérieur de la boîte au lieu de l'extérieur, comme si l'élément était enfoncé. On l'utilise pour les champs de saisie, les boutons pressés et les lueurs intérieures. On peut mélanger couches inset et extérieures dans un même box-shadow.
 
  › box-shadow suit-il border-radius ?  
Oui. L'ombre prend la forme de l'élément, coins arrondis compris, c'est pourquoi l'aperçu utilise le rayon que vous réglez. Elle ne suit pas les zones transparentes d'une image ; pour cela, utilisez le filtre CSS drop-shadow().