- Générateur box-shadow CSS

Qu'est-ce que la propriété box-shadow CSS ?

La propriété box-shadow est l'une des plus puissantes de la spécification CSS3. Elle permet d'ajouter une ou plusieurs ombres portées à n'importe quel élément HTML possédant une boîte de rendu (tout ce qui n'est pas display: inline pur). Introduite avec CSS3, cette propriété est aujourd'hui supportée par l'ensemble des navigateurs modernes à hauteur de 99,5 % selon Can I Use — elle est donc utilisable sans préfixe vendeur dans tous les projets de production.

Pourquoi utiliser box-shadow plutôt qu'une image PNG ?

Avant l'arrivée de CSS3, les designers devaient générer des images PNG ou GIF pour simuler des ombres portées. Cette approche présentait trois défauts majeurs :

• Poids des ressources : une image d'ombre même compressée pèse entre 3 et 15 Ko selon sa complexité, contre zéro octet pour une règle CSS.
• Rigidité : impossible de modifier la couleur, l'offset ou le flou sans relancer Photoshop ou Figma et régénérer l'asset.
• Responsive problématique : une image d'ombre ne s'adapte pas à la taille dynamique du composant, contrairement à box-shadow qui enveloppe parfaitement chaque coin arrondi défini par border-radius.

Différences entre box-shadow, text-shadow et filter: drop-shadow

Ces trois propriétés créent des effets d'ombre mais s'appliquent différemment :

filter: drop-shadow() est particulièrement utile pour les SVG ou les PNG avec fond transparent, car l'ombre suivra le contour exact de la forme visible plutôt que la boîte rectangulaire de l'élément.

Support navigateur et compatibilité

box-shadow est supporté depuis IE 9 (avec préfixe -ms-), Firefox 4, Chrome 10, Safari 5.1 et Opera 11. En 2024, aucun préfixe vendeur n'est nécessaire pour les cibles modernes. Les projets qui doivent supporter IE 8 ou inférieur devront recourir aux images PNG — une situation devenue extrêmement rare.

Syntaxe et paramètres détaillés

La syntaxe complète de box-shadow admet jusqu'à six valeurs, dont deux optionnelles :

/* Syntaxe complète */
box-shadow: [inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>;

/* Exemples */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 0 #1a56db;       /* ombre solide style flat design */

Le mot-clé inset

Par défaut, l'ombre est dessinée à l'extérieur de la boîte (ombre portée). Ajouter le mot-clé inset en première valeur inverse ce comportement : l'ombre est alors rendue à l'intérieur de l'élément, créant un effet d'enfoncement ou de creux. Cette technique est largement utilisée pour les champs de formulaire focalisés, les boutons "pressés" et les zones de saisie.

/* Champ de formulaire avec ombre intérieure au focus */
input:focus {
    box-shadow: inset 0 2px 6px rgba(26, 86, 219, 0.25);
    outline: none;
}

offset-x et offset-y — décalage de l'ombre

Ces deux valeurs obligatoires définissent la position de l'ombre par rapport à l'élément :

• offset-x positif → ombre décalée vers la droite
• offset-x négatif → ombre décalée vers la gauche
• offset-y positif → ombre décalée vers le bas (simulation d'une lumière venant du haut)
• offset-y négatif → ombre décalée vers le haut
• 0 0 → ombre centrée, uniformément diffusée dans tous les sens grâce au blur

blur-radius — rayon de flou

Valeur optionnelle (défaut : 0, ombre nette). Plus cette valeur est grande, plus l'ombre est diffuse et douce. Il n'existe pas de valeur négative pour le blur. Un blur de 0 produit une ombre solide aux bords nets, souvent utilisée pour les effets "néomorphisme" ou les ombres graphiques stylisées.

/* Ombre nette — flat design */
box-shadow: 4px 4px 0 #000;

/* Ombre douce — elevation Material Design */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

/* Ombre très diffuse — glassmorphism */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

spread-radius — rayon d'étalement

Valeur optionnelle (défaut : 0). Positive, elle augmente la taille de l'ombre dans toutes les directions. Négative, elle rétrécit l'ombre. Un cas d'usage fréquent : utiliser un spread négatif combiné à un blur important pour créer une ombre naturelle qui ne dépasse pas trop sur les côtés.

/* Ombre avec spread positif — contour élargi */
box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.15);

/* Ombre avec spread négatif — ombre naturelle sous objet */
box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.35);

La couleur — formats acceptés

La couleur peut être définie dans n'importe quel format CSS valide : mots-clés (black, transparent), hexadécimal, RGB, RGBA, HSL et HSLA. L'utilisation de RGBA ou HSLA est fortement recommandée pour contrôler l'opacité de l'ombre indépendamment de la couleur.

/* Mots-clés */
box-shadow: 0 4px 8px black;

/* Hexadécimal — sans transparence */
box-shadow: 0 4px 8px #1a56db;

/* RGBA — avec transparence */
box-shadow: 0 4px 8px rgba(26, 86, 219, 0.3);

/* HSLA — hue/saturation/lightness/alpha */
box-shadow: 0 4px 8px hsla(221, 79%, 48%, 0.3);

/* currentColor — hérite la couleur du texte */
box-shadow: 0 4px 8px currentColor;

Ombres multiples et effets avancés

L'une des fonctionnalités les plus puissantes de box-shadow est la possibilité d'empiler plusieurs ombres sur un même élément en les séparant par des virgules. Les ombres sont rendues de la première à la dernière — la première déclarée est donc au-dessus des suivantes.

/* Deux ombres empilées */
.card {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),    /* ombre proche, forte */
        0 8px 24px rgba(0, 0, 0, 0.06);  /* ombre distante, douce */
}

/* Trois ombres — élévation Material Design niveau 3 */
.card-elevated {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 6px rgba(0, 0, 0, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.05);
}

Néomorphisme (Neumorphism)

Le néomorphisme est un style de design populaire depuis 2020 qui simule des éléments légèrement en relief sur une surface plate. Il nécessite impérativement deux ombres de couleurs opposées : une claire (simulant la lumière) et une sombre (simulant l'ombre).

/* Fond de la page requiert la couleur intermédiaire */
body { background-color: #e0e5ec; }

/* Carte néomorphique — relief */
.card-neumorphic {
    background-color: #e0e5ec;
    box-shadow:
         6px  6px 12px #b8bec9,   /* ombre foncée en bas à droite */
        -6px -6px 12px #ffffff;   /* ombre claire en haut à gauche */
    border-radius: 12px;
}

/* Bouton pressé — enfoncement */
.btn-neumorphic:active {
    box-shadow:
        inset  4px  4px 8px #b8bec9,
        inset -4px -4px 8px #ffffff;
}

Glassmorphisme

Le glassmorphisme combine une ombre très diffuse avec un fond semi-transparent et un flou d'arrière-plan (backdrop-filter: blur()). L'ombre y joue un rôle subtil de délimitation :

.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
}

Ombre colorée — effet glow

Une ombre avec un offset nul (0 0) et une couleur vive crée un effet de halo lumineux (glow), populaire dans les thèmes dark et les interfaces gaming :

/* Halo bleu — bouton CTA */
.btn-glow {
    box-shadow: 0 0 20px rgba(26, 86, 219, 0.6);
    transition: box-shadow 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 30px rgba(26, 86, 219, 0.9);
}

/* Halo rouge d'erreur */
.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
}

Simulation de bordure sans border

Avec un spread positif et un blur nul, box-shadow peut simuler une bordure. Contrairement à border, une ombre ne modifie pas le box model et n'influence pas la mise en page :

/* Ombre = bordure 3px bleue sans modifier le layout */
.pseudo-border {
    box-shadow: 0 0 0 3px #1a56db;
}

/* Focus ring accessible — recommandé par WCAG */
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.5);
    outline: none;
}

Bonnes pratiques et performances

Impact sur les performances de rendu

box-shadow déclenche le paint du navigateur mais pas le layout ni le reflow. Cela le rend moins coûteux qu'une modification de margin ou border, mais toujours plus coûteux qu'une propriété composée (transform, opacity). En pratique :

• Animations CSS : animer box-shadow directement via transition force un repaint à chaque frame. Pour les animations hautes performances (60fps), préférez animer opacity d'un pseudo-élément avec une ombre statique.
• Listes longues : sur des composants répétés des centaines de fois (tableaux, listes virtualisées), une ombre complexe à plusieurs couches peut impacter le Cumulative Layout Shift et le Time to Interactive. Préférez une ombre simple ou utilisez will-change: box-shadow avec parcimonie.
• Mobile : sur les appareils à faible GPU, les ombres très larges (blur > 40px) sur des éléments grands peuvent créer de légères saccades lors du défilement.

/* ❌ Animation directe — repaint chaque frame */
.card {
    transition: box-shadow 0.3s ease;
}
.card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

/* ✅ Animation via pseudo-élément — compositing GPU */
.card { position: relative; }
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 16px 40px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.card:hover::after { opacity: 1; }

Cohérence du système de design

Dans un projet d'équipe, définir les ombres comme custom properties CSS (variables) assure la cohérence visuelle et facilite les changements de thème (dark mode notamment) :

/* Système d'élévation en variables CSS */
:root {
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:  0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
}

/* Dark mode — ombres plus marquées sur fond sombre */
[data-theme="dark"] {
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg:  0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
}

/* Utilisation */
.card { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-xl); }
.dropdown { box-shadow: var(--shadow-lg); }

Dark mode — adapter les ombres

Sur un fond sombre, les ombres noires deviennent imperceptibles. Il existe deux stratégies :

• Ombres plus opaques : augmenter l'alpha RGBA de 0.1-0.15 en light mode à 0.4-0.5 en dark mode.
• Ombres colorées légères : utiliser une couleur d'ombre légèrement teintée selon l'accent du thème, ce qui donne de la profondeur sans contraste excessif.

Accessibilité et ombres de focus

L'utilisation de box-shadow pour les indicateurs de focus (focus ring) est une pratique reconnue par le WCAG 2.1 (critère 1.4.11 Non-text Contrast). Un focus ring avec un spread de 2-3px et un ratio de contraste d'au moins 3:1 par rapport au fond environnant est considéré comme accessible.

/* Focus ring accessible — pattern recommandé */
:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--surface, #fff),   /* gap blanc entre l'élément et l'anneau */
        0 0 0 5px var(--focus-color, #1a56db); /* anneau visible */
}

FAQ — Questions fréquentes

Quelle est la différence entre box-shadow et filter: drop-shadow ?

box-shadow s'applique à la boîte rectangulaire de l'élément (modifiée par border-radius), tandis que filter: drop-shadow() suit le contour des pixels non transparents. Pour une carte avec des coins arrondis, les deux donnent le même résultat. Pour un SVG ou un PNG avec fond transparent, drop-shadow suit la forme réelle — box-shadow crée une ombre rectangulaire autour du fond transparent.

Peut-on animer box-shadow en CSS ?

Oui, via transition ou @keyframes. Cependant, les animations de box-shadow forcent un repaint à chaque frame, ce qui peut réduire les performances sur des éléments nombreux. La technique recommandée est d'animer l'opacity d'un pseudo-élément ::after portant l'ombre statique, ce qui délègue le rendu au GPU via le compositeur.

Comment désactiver box-shadow hérité d'un framework ?

Utilisez la valeur spéciale none :

.no-shadow { box-shadow: none; }

Si vous devez surpasser une règle Bootstrap 5, ajoutez un sélecteur plus spécifique ou utilisez la classe utilitaire .shadow-none directement dans le HTML.

Quelle unité utiliser pour les valeurs de box-shadow ?

Les valeurs d'offset, blur et spread acceptent toutes les unités CSS de longueur : px, em, rem, vh, etc. En pratique, px est la plus utilisée pour des ombres précises. Utiliser em ou rem peut être utile si vous voulez que l'ombre s'adapte à la taille de police de l'élément (par exemple, une ombre proportionnelle à la taille d'un titre).

Peut-on utiliser plusieurs box-shadow avec inset et extérieur ensemble ?

Absolument. Vous pouvez combiner autant d'ombres que vous le souhaitez, en mélangeant inset et non-inset dans la même déclaration. Exemple typique : border simulé (spread, no-blur) + ombre portée + ombre intérieure légère pour la profondeur :

.input-styled {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.1),          /* pseudo-border */
        inset 0 2px 4px rgba(0,0,0,0.05),   /* profondeur intérieure */
        0 4px 12px rgba(0,0,0,0.1);          /* élévation */
}

Box-shadow est-il inclus dans le box model CSS ?

Non. C'est l'une de ses particularités importantes : box-shadow n'affecte pas le box model, ne déclenche pas de reflow et ne prend pas de place dans le flux du document. Une ombre très grande ne poussera pas les éléments voisins. En revanche, elle peut être tronquée si l'élément parent a overflow: hidden.

Comment créer une ombre qui ne soit visible que d'un côté ?

Combinez un offset directionnel, un spread négatif et un overflow: hidden sur le conteneur parent, ou utilisez un spread négatif élevé qui "masque" l'ombre des côtés non souhaités :

/* Ombre uniquement en bas */
.shadow-bottom {
    box-shadow: 0 8px 12px -6px rgba(0,0,0,0.25);
}

/* Ombre uniquement à droite */
.shadow-right {
    box-shadow: 6px 0 12px -4px rgba(0,0,0,0.2);
}

Conclusion

La propriété box-shadow est un outil fondamental du CSS moderne, offrant une flexibilité remarquable pour créer des effets de profondeur, d'élévation et d'ambiance lumineuse. De l'ombre portée classique au néomorphisme, en passant par les halos lumineux et les effets glassmorphiques, les combinaisons sont quasi infinies avec une seule propriété CSS.

Ce générateur interactif vous permet d'explorer visuellement ces paramètres sans toucher à votre code. Ajustez les sliders, observez le résultat en temps réel et copiez le code CSS généré directement dans votre projet. Pour aller plus loin, n'hésitez pas à ajouter plusieurs ombres et à expérimenter les valeurs négatives de spread pour des résultats plus naturels.