Ce générateur de box-shadow CSS est un outil gratuit accessible dans le navigateur. Il permet de créer et d’exporter visuellement des ombres de blocs sans écrire une seule ligne de code.
Faites glisser un curseur et l'aperçu se met à jour instantanément. Chaque propriété est juste en face de vous.
Ce que vous pouvez contrôler :
- Décalage horizontal et vertical
- Flou et rayon de diffusion
- Couleur et opacité des ombres
- Direction d &apos ; entrée ou de sortie
Empilez plusieurs calques d'ombre pour obtenir des effets complexes. Vous ne savez pas par où commencer ? Choisissez l'un des 8 préréglages intégrés comme Soft Lift, Neon Glow ou Retro, puis modifiez-le à partir de là.
La boîte d'aperçu est flexible aussi. Basculez entre les formes arrondies, carrées, circulaires et de carte. Modifiez la couleur de la boîte et l'arrière-plan de la toile pour correspondre à votre contexte de conception réel.
Lorsque vous avez terminé, exportez dans le format dont vous avez besoin :
- CSS simple
- Une propriété CSS personnalisée (
--shadow: ...) - Une entrée de configuration Tailwind
- Un objet de style React en ligne
Réduisez la sortie ou gardez-la lisible. Ajoutez le préfixe -webkit- en un seul clic. Copiez et collez directement dans votre projet.
Aucune inscription requise. Pas de pubs. Juste un outil rapide et propre qui sort de votre chemin.
Qu'est-ce qu'un générateur d'ombre de boîte CSS ?
Un générateur d'ombre de boîte CSS est un outil basé sur un navigateur qui transforme les entrées de curseur et de couleur en syntaxe d'ombre de boîte prête à être copiée.
Au lieu de deviner les valeurs de décalage et de flou à la main, vous faites glisser quelques contrôles et l'outil écrit la déclaration pour vous.
L'ensemble de l'outil est construit autour d'une seule propriété en CSS (EN), rien de plus.
- Il ne touche pas les pixels ou ne rastre rien
- Il ne conçoit pas votre mise en page, seulement une ligne de style
- Il ne remplace pas l'étape d'exportation d'un outil de conception, juste les calculs manuels derrière elle
Ce n'est pas non plus la même chose qu'un générateur d'ombres de texte, qui ombrage les lettres plutôt que les boîtes d'éléments.
Ce qu'il produit en fait est une chaîne de code, prête à être collée directement dans une feuille de style.
Comment fonctionne la propriété box-shadow ?
La propriété box-shadow (EN) dessine une ombre en utilisant cinq valeurs dans un ordre fixe : décalage horizontal, décalage vertical, rayon de flou, rayon de propagation et couleur.
Ignorez une valeur et le navigateur revient à sa valeur par défaut, donc une ombre avec seulement deux chiffres s'affiche toujours, sans flou ni propagation.
| Valeur | Contrôles | À zéro ou négatif |
|---|---|---|
| Décalage horizontal | Position de l'ombre, gauche ou droite | Négatif pousse l'ombre à gauche |
| Décalage vertical | Position de l'ombre, vers le haut ou vers le bas | Négatif pousse l'ombre vers le haut |
| Rayon de flou | Douceur du bord | Zéro donne un bord dur et tranchant |
| Rayon de propagation | Taille globale de l'ombre | Le négatif rétrécit l'ombre |
Order matters : swap blur et spread et le navigateur lit le deuxième nombre comme spread indépendamment de l'intention.
Ombre extérieure vs Ombre intérieure
Ombre extérieure : le comportement par défaut, il se trouve derrière l'élément comme si la boîte était soulevée de la page.
Inset shadow : l'ajout du mot-clé inset inverse l'effet, de sorte que l'ombre tombe à l'intérieur des bords de l'élément comme si elle était pressée dans la surface.
Le mot-clé est toujours le premier dans la déclaration, avant toutes les valeurs numériques.
Quels formats de couleurs peut utiliser une ombre de boîte ?
Une couleur d'ombre de boîte accepte n'importe quelle valeur de couleur CSS valide : hex, rgb, rgba, hsl, ou une couleur nommée comme noir.
rgba est la valeur la plus importante pour les ombres, car sa quatrième valeur contrôle la transparence.
- Hex : couleur unie uniquement, pas de canal de transparence
- rgba : rouge, vert, bleu, plus une valeur alpha entre 0 et 1
- hsl / hsla : teinte, saturation, luminosité, avec le même slot alpha optionnel
Une ombre définie sur une opacité totale ressemble à un bloc à bords durs. Faites tomber l'alpha à quelque chose comme 0,15 ou 0,2 et il se lit comme une ombre au lieu d'une forme.
Les concepteurs transmettent souvent les couleurs sous forme de codes hexadécimaux à partir d'une maquette, et la conversion de cette valeur hexadécimale en rgba est généralement la première étape pour faire correspondre la sortie d'un générateur à une composition.
Il en va de même dans l'autre sens. Si une palette a été construite en HSL, la traduction d'une sélection HSL en rgb ou rgba maintient la couleur de l'ombre cohérente avec le reste du système de conception.
Comment superposer plusieurs ombres de boîte dans une déclaration ?
Séparez chaque ombre par une virgule et le navigateur les empilera dans une seule déclaration box-shadow.
L'ordre contrôle la profondeur : la première ombre listée se trouve en haut, la plus proche de l'élément, et chacune après elle se trouve plus en arrière.
Une ombre de carte à deux couches ressemble souvent à ceci :
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);La première ombre est serrée et sombre, elle fait le gros plan. Le second est plus grand et plus doux, donnant l'illusion d'une lumière ambiante tombant autour de l'ensemble de l'objet.
- Deux couches : une ombre de contact serrée plus une ombre ambiante douce
- Trois couches : ajoute une troisième ombre encore plus douce pour plus de profondeur sur les grandes cartes ou les modaux
- Aucune limite pratique sur le nombre de couches, bien que les navigateurs ralentissent une fois que vous empilez plus de quatre ou cinq
Les chargeurs CSS à une seule div s'appuient constamment sur cette astuce, simulant un anneau de points avec un seul élément au lieu de six nœuds séparés.
C'est la même technique de superposition derrière la plupart des entrées dans un générateur d’indicateurs de chargement CSS.
Quels navigateurs prennent en charge box-shadow, et avez-vous besoin d'un préfixe de fournisseur ?
Non, tous les navigateurs actuels rendent box-shadow sans aucun préfixe, et ils le font depuis plus d'une décennie.
La propriété a atteint le statut Baseline Widely Available le 29 janvier 2018, selon le jeu de données de fonctionnalités Web qui alimente le tableau de compatibilité de MDN (EN).
Cette étape a en fait atterri des années après que les navigateurs avaient déjà rendu la propriété sûre à utiliser.
- Chrome a abandonné l'exigence du préfixe -webkit- à la version 10, publiée en mars 2011
- Firefox a abandonné -moz- à la version 4, également en mars 2011
- Safari suivi à la version 5.1, mi-2011
- Internet Explorer a ajouté le support sans préfixe à la version 9, sa première version compatible CSS3
La spécification sous-jacente, CSS Backgrounds and Borders Module Level 3 (EN), est toujours publiée par le W3C en tant que Candidate Recommendation Draft, pas une Recommandation terminée.
C'est en dépit du fait que la propriété box-shadow elle-même est stable dans les navigateurs depuis plus d'une décennie.
Cet écart entre l'état des spécifications et la fiabilité dans le monde réel est exactement le genre de chose que les tests de compatibilité entre navigateurs (EN) sont censés capturer.
Une propriété qui fonctionne bien sur votre machine ne garantit pas qu'elle se comporte de la même façon partout.
Les anciens projets contiennent parfois encore des déclarations -webkit-box-shadow ou -moz-box-shadow qui sont restées d'un boilerplate vieux d'une décennie. Leur suppression aujourd'hui ne change rien dans tous les navigateurs pris en charge.
Générateur d'ombres de boîte vs écriture de CSS à la main : lequel devriez-vous utiliser ?
Utilisez un générateur pour une ombre unique, et recourez au codage manuel une fois que vous avez un système de conception avec des dizaines d'ombres.
Les deux ne sont pas vraiment des rivaux, mais plutôt des outils adaptés à différentes étapes d'un même travail.
| Méthode | Facilité d'utilisation | Précision de sortie | Le meilleur pour |
|---|---|---|---|
| Outil de générateur | Haut, glisser et copier | Bon pour les ombres simples | Quick one-off styling |
| Outils de développement du navigateur | Moyen, nécessite un élément existant | Valeurs exactes, en direct | Réglage d’une ombre existante |
| CSS codé à la main | Faible, nécessite de mémoriser la syntaxe | Dépend du codeur | Conception de systèmes, jetons réutilisables |
| Exportation de l'outil de conception | Haut dans Figma ou XD | Souvent nécessite un nettoyage manuel | Transfert de la conception au code |
Devtools gagne en précision parce que vous modifiez un élément réel dans une mise en page réelle. Il n'y a aucune conjecture sur l'apparence d'une valeur une fois qu'elle est déposée dans votre page réelle.
Le codage manuel gagne une fois que les ombres deviennent des jetons.
Un système de conception avec une élévation de 1 à 4 nécessite des variables partagées, pas quatre chaînes de caractères générées séparément qui se ressemblent.
La plupart des équipes frontend (EN) font face au même compromis avec une propriété complètement différente.
Un arrière-plan rapide commence souvent la vie dans un générateur de dégradés CSS (EN).
Il est généralement reconstruit en tant que propriétés personnalisées écrites à la main une fois que ce dégradé doit vivre dans cinq composants différents.
Un générateur ne peut pas non plus vous dire quand une ombre est le mauvais outil. C'est une décision qu'aucun curseur ne fera pour vous.
Quel style d'ombre correspond à quel objectif de conception ?
Quatre styles d'ombres couvrent la plupart des interfaces réelles : soft, hard, neumorphic et material elevation.
Chacune est en fait une combinaison différente de flou, de diffusion et de superposition appliquée à la même propriété.
Ombre douce
Une ombre douce utilise un large rayon de flou et une faible opacité, de sorte que le bord s’estompe au lieu de s’arrêter brusquement.
C'est le choix par défaut pour les cartes, les modes et tout ce qui est censé se sentir comme s'il reposait doucement au-dessus de la page.
Avantages :
- Se lit comme calme et moderne sur presque n'importe quel fond
- Pardonner les petites erreurs de décalage ou de couleur, puisque le flou cache les bords tranchants
Cons :
- Peut paraître délavé ou à peine visible sur des arrière-plans occupés
- Surutilisé sur une page entière, il cesse de signaler la profondeur du tout
La galerie CSS shadow effects (EN) est un moyen rapide de voir les ombres douces appliquées côte à côte sur les boutons, les cartes et les en-têtes.
Hard Shadow
Zéro flou, une certaine diffusion, un décalage facile à voir. C'est une ombre dure, et elle se lit comme un élément graphique plutôt qu'un effet d'éclairage.
Pro : il donne aux interfaces une personnalité distincte, presque rétro que les ombres douces ne peuvent pas simuler.
Inconvénient : il entre mal en conflit avec toute interface utilisateur qui est déjà légère ou minimale, puisque les deux styles ne se mélangent pas.
Le web design brutaliste et néo-brutaliste s’appuie constamment sur des ombres dures, souvent associées à des bordures épaisses et à des couleurs plates au lieu de dégradés.
Neumorphisme
La règle de contraste non textuel (EN) du WCAG 2.1 exige un rapport 3 :1 pour les composants interactifs, et la plupart des interfaces neumorphiques échouent par conception.
Le style s’appuie sur deux ombres, une claire et une sombre, assises sur un fond à peine différent de l’élément lui-même.
C'est exactement ce qui crée le problème de faible contraste.
| Avantages | Cons |
|---|---|
| Identité visuelle distinctive et tactile | Échoue fréquemment aux vérifications de contraste WCAG |
| Une forte identité de marque pour les produits de niche | Les états interactifs sont difficiles à distinguer |
| Fonctionne bien pour les tableaux de bord consultés par un public formé | Mauvaise adaptation aux besoins d'accessibilité face au public |
Si un look dépoli et translucide est plus proche de ce que vous recherchez, c'est une technique entièrement différente, construite à partir de flou d'arrière-plan plutôt que d'ombres superposées.
Un générateur de morphismes de verre séparé couvre ce style.
Élévation du matériel
Les Material Design elevation guidelines (EN) de Google définissent la profondeur de l'ombre sur une échelle z-space allant de 0 à 24.
Chaque niveau est lié à une valeur dp spécifique et à une ombre légèrement différente.
Une élévation plus élevée signifie une ombre plus grande et plus douce, imitant un objet physiquement plus proche de la source de lumière.
Où elle excelle : la cohérence sur une grande application, puisque chaque composant choisit un niveau au lieu d'une valeur d'ombre unique.
Le système évolue proprement des boutons aux modaux.
Où il manque : c'est un engagement complet du système de conception, excessif pour une seule page de marketing qui a juste besoin d'une belle ombre de carte.
Box-shadow affecte-t-il les performances de rendu des pages ?
Oui, plus que la plupart des propriétés. Box-shadow force le navigateur à repeindre les pixels sur chaque image qu'il change. C'est l'une des étapes les plus coûteuses du pipeline de rendu.
La documentation sur les performances de rendu (EN) de Google place le budget d'images à environ 16 millisecondes pour maintenir 60fps, couvrant le script, le style, la mise en page et la peinture combinés.
Dans cette même documentation, la peinture est désignée comme l'une des parties les plus coûteuses de ce budget.
- L'animation de l'ombre de boîte déclenche directement une repeinte sur chaque image
- L'animation de l'opacité ou de la transformation évite presque entièrement cette repeinte
- Une ombre de boîte statique et non animée ne coûte rien de plus une fois la page peinte
Les tests de rendu de Tobias Ahlin (EN) ont trouvé une solution : placer l'ombre sur un pseudo-élément et animer l'opacité de cet élément au lieu de l'ombre elle-même.
Le résultat visuel est identique à l'animation de l'ombre de boîte directement, juste sans marteler l'étape de peinture sur chaque image.
Quand box-shadow ne s'applique-t-il pas ?
box-shadow cesse d'être le bon outil au moment où la forme dont vous avez besoin n'est pas un rectangle.
La propriété suit toujours la boîte de l'élément, ou son rayon de bordure s'il est défini. Il n’a aucune idée de ce qu’il y a à l’intérieur de cette boîte.
- PNG et logos transparents : utilisez plutôt filter : drop-shadow(), car il suit le canal alpha de l'image plutôt que son cadre rectangulaire.
- Formes vectorielles irrégulières : un filtre SVG natif trace le chemin réel au lieu d'une boîte de délimitation
- Animation constante et bon marché : box-shadow force une repeinture sur chaque image, donc un pseudo-élément animé est le meilleur choix
- Imprimer les feuilles de style : la plupart des navigateurs suppriment l'ombre de boîte lors de l'impression par défaut
Ce deuxième cas est le plus important pour les logos et les icônes construits en SVG (EN), où une ombre rectangulaire derrière une étoile ou une forme de logo semble évidemment incorrecte.
La documentation de MDN sur le filtre drop-shadow() (EN) rend la distinction explicite. box-shadow ombrage la boîte, drop-shadow ombrage le contenu.
L’ombre exportée d’un outil de conception peut également ne pas être traduite correctement. L'effet d'ombre portée de Figma (EN) correspond étroitement à l'ombre de la boîte, mais une lueur construite à partir de remplissages en couches n'a généralement aucun équivalent CSS propre.
Comment utiliser un générateur d'ombre de boîte CSS, étape par étape ?
L'ordre ci-dessous correspond à la façon dont la plupart des générateurs sont réellement disposés, de gauche à droite, de haut en bas.
- Étape 1 : choisissez d'abord le décalage horizontal et vertical, car ceux-ci décident de l'emplacement de l'ombre avant toute autre chose
- Étape 2 : définissez le rayon de flou pour contrôler l'apparence douce ou nette du bord.
- Étape 3 : ajustez le rayon de diffusion uniquement si l'ombre doit paraître plus grande ou plus petite que l'élément lui-même
- Étape 4 : définissez la couleur et l'opacité en dernier, puisque l'obscurité d'une ombre n'a de sens qu'une fois sa taille et sa forme définies
- Étape 5 : activez l'insertion si l'ombre doit être placée à l'intérieur de l'élément au lieu de derrière
- Étape 6 : prévisualiser le résultat contre la couleur d'arrière-plan réelle de l'élément, pas la toile par défaut du générateur
- Étape 7 : copier la déclaration box-shadow générée et la coller dans la règle de feuille de style de l'élément
L'aperçu sur le mauvais arrière-plan est la raison la plus courante pour laquelle une ombre semble parfaite dans l'outil et incorrecte sur la page active.
La zone d'aperçu par défaut d'un générateur est généralement blanche ou gris clair, ce qui flatte presque toutes les valeurs d'ombre.
Comment ajouter un code box-shadow généré dans Tailwind CSS, Sass ou Bootstrap ?
Un générateur vous remet une chaîne d'ombre de boîte brute. Ce que vous faites ensuite dépend du framework que le projet utilise déjà.
| Cadre | Où va la valeur | Résultat |
|---|---|---|
| Tailwind CSS | La clé boxShadow dans la configuration du thème, ou une classe de valeur arbitraire | shadow-brand ou shadow-[valeur] utilitaire |
| Sass | Un mixin variable ou réutilisable | $shadow-card: 0 2px 4px rgba(0,0,0,0.2); |
| Bootstrap | Remplacer l'une des trois variables d'ombre Sass | $box-shadow, $box-shadow-sm ou $box-shadow-lg |
Tailwind (EN) est livré avec une échelle d'ombre fixe hors de la boîte.
Sa documentation v4 (EN) actuelle liste sept utilitaires de taille, de shadow-2xs à shadow-2xl.
Chacune correspond à une variable CSS plutôt qu'à une valeur codée en dur.
Déposer la sortie d'un générateur dans Tailwind signifie soit remplacer l'une de ces sept variables, soit utiliser la syntaxe arbitraire shadow-[value] pour une fois.
Sass prend la valeur telle quelle. Le stockage en tant que variable, $shadow-card par exemple, est ce qui transforme une sortie unique du générateur en quelque chose de réutilisable dans toute une bibliothèque de composants.
Bootstrap (EN) est le plus rigide des trois.
Sa documentation officielle (EN) définit exactement quatre classes shadow, shadow-none, shadow-sm, shadow, et shadow-lg, construites à partir de trois variables Sass.
La valeur personnalisée d'un générateur ne s'intègre pas directement dans Bootstrap. Il doit remplacer l'une de ces trois variables avant une recompilation, ou être appliqué comme style en ligne.
Le système de conception Polaris de Shopify pousse l'approche des jetons un peu plus loin.
Il définit des profondeurs d'ombre nommées dans son propre paquet de jetons au lieu de laisser les composants individuels porter des chaînes d'ombre brutes. C'est le même instinct derrière une variable Sass, simplement formalisé comme un système de conception réel.
Quelles sont les erreurs les plus courantes dans le box-shadow ?
La plupart des bogues box-shadow se résument à une poignée d'erreurs répétables.
- Manque de virgule entre les ombres superposées
- Permutation des valeurs de flou et de diffusion
- Insert placé dans la mauvaise position
- Couleur de l'ombre gauche à pleine opacité
Deux d'entre eux sont silencieux. Le navigateur n'affiche pas d'erreur, il affiche simplement quelque chose qui ne correspond pas à ce que vous vouliez.
| Erreur | À quoi ça ressemble | Fix |
|---|---|---|
| Manque de virgule | La deuxième ombre est ignorée ou brise toute la déclaration | Séparez chaque ombre avec une virgule, pas un espace |
| Flou et diffusion échangés | Ballons d'ombre bien au-delà du bord de l'élément | Gardez l'ordre : décalage-x, décalage-y, flou, diffusion, couleur |
| inset placed last | La déclaration n'est pas valide et aucune ombre n'est rendue | L'inset vient toujours en premier, avant les chiffres |
| Couleur pleine opacité | L'ombre se lit comme un bloc solide au lieu d'une ombre | Utilisez rgba avec un alpha autour de 0,15 à 0,3 |
Les incohérences de rayon de bordure causent un problème plus silencieux. Une ombre sur un élément arrondi suit toujours automatiquement le rayon de la bordure.
Une ombre qui a l'air carrée contre des coins arrondis signifie généralement que le rayon a été défini sur un élément enfant, et non sur celui qui porte l'ombre.
Les arrière-plans transparents provoquent une confusion similaire. Une ombre est rendue autour de la boîte de l'élément, pas autour de ce qui est visible à l'intérieur.
Un PNG transparent à l'intérieur d'une div affichera toujours une ombre rectangulaire, peu importe à quel point l'image elle-même est irrégulière.
Questions fréquentes : Générateur de box-shadow CSS
Quelle est la différence entre box-shadow et text-shadow ?
text-shadow ombrage les lettres du contenu du texte, tandis que box-shadow ombrage toute la boîte de bordure de l'élément.
Un titre peut porter les deux à la fois : une ombre de texte derrière ses caractères et une ombre de boîte séparée derrière le conteneur qui les contient.
Est-ce que box-shadow fonctionne correctement avec border-radius sur les éléments arrondis ?
Oui, oui. Une boîte-ombre suit automatiquement le border-radius d'un élément, se courbant aux mêmes coins au lieu de rester rectangulaire. Si une ombre semble carrée sur un élément arrondi, le rayon se trouve sur un élément enfant, et non sur celui qui porte l'ombre (voir erreurs courantes).
Est-ce que box-shadow peut être animé avec des transitions CSS ?
Techniquement oui, mais cela a un coût : la transition de l'ombre de boîte force le navigateur à repeindre sur chaque image. Une alternative plus lisse anime l'opacité d'un pseudo-élément qui porte déjà l'ombre, comme c'est couvert dans la section performance.
Comment rendre une valeur d'ombre de boîte réactive sur toutes les tailles d'écran ?
Mettez à l'échelle le décalage, le flou et l'écartement à l'intérieur d'une requête multimédia, en réduisant chaque valeur à mesure que la fenêtre se rétrécit.
Un modèle courant utilise clamp() sur le rayon de flou uniquement, laissant une déclaration s'ajuster en douceur au lieu d'écrire une règle séparée par point d'arrêt.
Comment réutiliser le CSS généré sur plusieurs projets ?
Stockez la déclaration une fois, dans une propriété CSS personnalisée comme --shadow-card, au lieu de coller la même chaîne dans chaque feuille de style.
Tout projet qui importe le fichier de propriétés partagées hérite de la même valeur shadow, et une seule modification la met à jour partout.
Où se décompose un générateur d'ombre de boîte CSS ?
Un générateur d’ombre de boîte CSS se décompose lorsqu’un projet accumule plus d’une douzaine de valeurs d’ombre distinctes dans sa bibliothèque de composants. À ce stade, un système de jetons maintenu remplace la sortie unique du générateur.
La réparation de l'étalement suit un ordre spécifique, pas un passage de nettoyage aléatoire.
- Vérification du rendu cross-browser en premier
- Consolidation de valeur en double deuxième
- Extraction de jetons dans un fichier design-token partagé troisième
Vérifier le rendu d'abord attrape le bug rare avant qu'il ne soit cuit dans une douzaine de composants. La consolidation des valeurs presque en double supprime ensuite le bruit qui rend l'extraction des jetons douloureuse.
La standardisation des ombres dans un ensemble de jetons fixe coûte de la flexibilité. Un composant ne peut plus demander un réglage arbitraire sans une petite étape de construction, échangeant un raffinement ponctuel contre une cohérence dans l'ensemble de l'interface.
La prochaine étape naturelle est d'arrondir les coins de ce même élément avec un générateur border-radius dédié, puisque la profondeur d'ombre et le rayon de coin sont ajustés ensemble sur presque toutes les cartes ou boutons.