Exemples de box-shadow CSS : 40 ombres à copier en CSS ou Tailwind
40 exemples de box-shadow originaux à prévisualiser et copier en CSS ou en classe Tailwind : doux, superposés, uniquement en bas, inset, colorés, mode sombre et une échelle d'élévation.
Une ombre de boîte s'écrit box-shadow: décalage-x décalage-y flou étendue couleur, avec un mot-clé inset facultatif. Les ombres douces et réalistes empilent généralement deux ou trois couches de faible opacité, et une ombre uniquement en bas utilise un décalage y positif avec une étendue négative. Choisissez l'un des 40 exemples ci-dessous et copiez-le en CSS ou en Tailwind.
Les cinq parties d'une valeur box-shadow
Partie
Exemple
Ce qu'elle fait
décalage x
Déplace l'ombre vers la droite (positif) ou vers la gauche (négatif)
décalage y
Déplace l'ombre vers le bas (positif) ou vers le haut (négatif)
rayon de flou
Adoucit le bord, ne peut pas être négatif, 0 donne un bord net
rayon d'étendue
-6px
Agrandit (positif) ou réduit (négatif) l'ombre avant le flou
rgb(0 0 0 / 0.15)
Reprend la couleur du texte de l'élément si elle est omise
Dessine l'ombre à l'intérieur de la bordure plutôt qu'à l'extérieur
La plupart des listes d'ombres vous donnent une image et une ligne de CSS. Celle-ci explique aussi pourquoi une ombre paraît réelle ou artificielle, vous fournit une échelle d'élévation cohérente à intégrer dans un design system, et montre comment garder les ombres visibles sur fond sombre. Chaque exemple est original et s'exécute en direct dans votre navigateur.
Filtrez la galerie par style, par exemple superposé, uniquement en bas, inset ou coloré.
Chaque carte montre l'ombre sur une vraie surface. Passez le fond en sombre pour voir comment elle tient.
Cliquez sur une carte pour la copier. Utilisez le sélecteur pour choisir du CSS simple ou une classe Tailwind arbitraire.
Pour un produit entier, copiez plutôt les tokens d'élévation plus bas que des ombres isolées.
Utilisez une étendue négative avec un décalage y plus grand pour garder une ombre sous l'élément et loin de ses côtés.
Teintez les ombres avec une version sombre de la teinte du fond plutôt qu'avec du noir pur, pour un rendu moins terne.
Si l'effet de soulèvement au survol saccade, animez l'opacité d'un pseudo-élément qui porte l'ombre la plus grande plutôt que box-shadow lui-même.
box-shadow suit border-radius, donc les cartes arrondies ont des ombres arrondies sans effort supplémentaire.
Questions fréquentes
Comment ajouter une ombre uniquement en bas ?
Donnez à l'ombre un décalage y positif et une étendue négative à peu près égale au flou, par exemple box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). L'étendue négative rétracte l'ombre à gauche, à droite et en haut, si bien que seule la partie poussée sous le bord inférieur reste visible.
Comment utiliser plusieurs ombres ?
Séparez les ombres par des virgules. La première ombre de la liste est peinte au-dessus des autres, placez donc en premier l'ombre de contact serrée et plus sombre, et en dernier l'ombre ambiante large et légère.
Pourquoi mon ombre disparaît-elle sur un fond sombre ?
Une ombre noire sur une page presque noire n'a quasiment aucun contraste. Dans les thèmes sombres, misez sur une couleur de surface plus claire pour les éléments surélevés, ajoutez une fine bordure claire ou un reflet inset de 1px, et augmentez l'opacité de l'ombre au lieu de compter uniquement sur elle.
Quelle est la différence entre box-shadow et drop-shadow() ?
box-shadow suit la boîte de l'élément et son border-radius. filter: drop-shadow() suit les pixels visibles, il épouse donc les PNG transparents et les formes SVG, mais il n'a ni valeur d'étendue ni option inset.
Comment écrire une ombre personnalisée dans Tailwind ?
Utilisez une valeur arbitraire avec des underscores à la place des espaces, comme shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. L'échelle intégrée va de shadow-2xs à shadow-2xl, et inset-shadow-sm et ses variantes couvrent les ombres intérieures.
Pourquoi les ombres superposées paraissent plus réelles
Les objets réels projettent deux types d'ombre à la fois : une petite ombre sombre juste là où ils touchent la surface, et une large ombre pâle due à la lumière qui rebondit dans la pièce. Une seule ombre floue essaie d'être les deux et finit par ressembler à un halo gris.
Empiler deux à quatre couches, chacune avec environ le double du décalage et du flou de la précédente et une opacité plus faible, imite ce mélange. Le coût est faible, mais de très grandes valeurs de flou sur de nombreux éléments peuvent ralentir le défilement sur les appareils peu puissants, réservez donc les ombres lourdes à quelques surfaces surélevées.
Les ombres comme une échelle, pas un cas isolé
Un produit paraît cohérent quand chaque élément surélevé puise dans une courte échelle : cartes au repos, cartes survolées, menus déroulants, boîtes de dialogue. Stockez chaque palier dans une propriété personnalisée et réutilisez-la, ainsi changer la direction de la lumière plus tard ne demande qu'une seule modification.
Faites croître le décalage y plus vite que le décalage x, qui reste à zéro pour une source de lumière située juste au-dessus. Mélanger les directions de lumière d'un composant à l'autre est l'un des moyens les plus rapides de donner à une interface un air de pièces rapportées.
Box-shadow uniquement en bas
Une étendue négative réduit l'ombre de tous les côtés, puis le décalage y la pousse vers le bas. Gardez l'étendue proche de l'opposé du flou pour que rien ne déborde sur les bords gauche et droit.
Trois ombres uniquement en bas
De gauche à droite : un bord serré, une chute plus douce et la fine ligne utilisée sous les en-têtes fixes.
Une échelle d'élévation réutilisable
Cinq paliers couvrent la plupart des interfaces. Chacun double le décalage et le flou du précédent et conserve une couche de contact serrée en dessous.
Tokens d'élévation avec surcharge pour le thème sombre
Les composants utilisent var(--shadow-2) et ne codent jamais une ombre en dur. Le bloc sombre la remplace par un léger liseré et un noir plus profond.
Ombre unique ou ombre superposée
Même taille, réalisme différent
La carte de gauche utilise un seul grand flou. Celle de droite répartit la même obscurité sur trois couches, ce qui donne un soulèvement plus doux et plus naturel.