Softonic

Générateur d'ombre de boîte CSS

Étape 1 / 2
Suivant

Créez une règle box-shadow à la fois : définissez les décalages horizontal et vertical, le flou, l’étalement, la couleur et l’inset facultatif, puis copiez le résultat. Les vraies ombres demandent généralement deux ou trois couches, alors générez chaque couche séparément et reliez les règles avec une virgule.

Comment concevoir une ombre de boîte

  1. 1

    Définissez les valeurs de l'ombre

    Décalage horizontal, décalage vertical, rayon de flou, étalement et couleur avec opacité.

  2. 2

    Activez l'inset

    Basculez l'ombre en inset pour une ombre intérieure, utile pour les boutons enfoncés et les effets de cavité.

  3. 3

    Choisissez la couleur

    Le noir avec une faible opacité est le classique. Les ombres colorées (correspondant à la teinte de l'élément, plus foncées) paraissent plus naturelles.

  4. 4

    Copiez le CSS

    Copiez la règle d'ombre unique et collez-la dans votre feuille de style. Pour des ombres superposées, générez chaque couche séparément et combinez les règles avec une virgule.

La syntaxe box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • x-offset: positif = droite, négatif = gauche.
  • y-offset: positif = bas, négatif = haut.
  • blur: 0 = bord dur, plus élevé = plus doux. La taille visible est environ 1,5x le flou au-delà de l’élément.
  • spread: taille supplémentaire au-delà de l’élément. Positif agrandit l’ombre ; négatif la réduit (utile pour des halos subtils).
  • colour: prend en charge n’importe quelle couleur CSS. rgba(0, 0, 0, 0.15) est la base.
  • inset: mot-clé inversant l’ombre à l’intérieur de l’élément.

Les ombres superposées semblent réelles

Ce générateur produit une règle d’ombre à la fois ; pour construire une ombre superposée, générez chaque couche séparément et combinez les règles avec une virgule.

Une ombre avec 0 0 40px semble floue. Deux ombres, une petite nette près de l’élément et une plus grande douce plus loin, imitent la façon dont la vraie lumière se disperse.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

La première ligne donne l’ombre de contact serrée ; la seconde l’ambiante plus douce. Ce modèle unique couvre 80 % des interfaces de style carte.

Systèmes d’élévation

Material Design utilise 6 niveaux d’élévation, chacun étant une pile d’ombres différente. Simplifié :

Élévation Ombre
1 (repos) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (soulevé) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (flottant) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

Choisissez-en un par rôle d’élévation et utilisez-le de manière cohérente.

Les ombres colorées paraissent plus naturelles

Les ombres noires pures semblent artificielles car les vraies ombres sont teintées par la surface en dessous. Essayez :

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);
  • un bleu-gris frais au lieu de noir pur. Sur des arrière-plans chauds, utilisez une teinte plus chaude.

Performance

Les ombres de boîte sont peintes à chaque repaint. De grandes ombres lourdes sur de nombreux éléments peuvent ralentir le défilement. Mitigations :

  • Utilisez transform: translateZ(0) sur l’élément pour forcer une couche composite.
  • Remplacez les ombres complexes par filter: drop-shadow() uniquement si vous avez besoin que l’ombre suive un clip-path (c’est généralement plus lent).
  • Limitez les ombres sur les éléments qui se redessinent fréquemment.

Inset pour les états enfoncés

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Les ombres inset simulent un aspect enfoncé, le bouton semble enfoncé dans la surface. Combinez avec un petit transform: translateY(1px) vers le bas pour un clic tactile.

Questions fréquentes

Généralement parce que le flou est trop faible ou l’étalement trop élevé. Une ombre à bord dur sans flou ressemble à un élément dupliqué. Augmentez le flou (20-30px est un point de départ courant) et gardez l’étalement à 0 ou à de très petites valeurs négatives.

L’ombre de boîte suit la border-box de l’élément, y compris le border-radius, donc les cartes arrondies obtiennent automatiquement des ombres joliment arrondies. Pour les formes clip-path, l’ombre de boîte ne suit pas le clip ; utilisez filter: drop-shadow() à la place.

Décalez fortement l’ombre dans la direction choisie et utilisez un étalement négatif pour cacher le côté opposé. Ou utilisez deux ombres, une visible du côté cible, une autre avec un étalement négatif pour “manger” le débordement indésirable.

Pas de limite stricte, mais chaque ombre est un autre passage de peinture. Trois à quatre couches est le plafond pratique ; au-delà, vous devriez envisager d’utiliser une image d’arrière-plan ou un SVG à la place.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.