Générateur de box-shadow CSS
Concevez des ombres box-shadow CSS visuellement avec un aperçu en direct et un code prêt à copier, le tout dans votre navigateur.
Chargement de Générateur de box-shadow CSS… Si rien ne se passe, activez JavaScript.
La propriété box-shadow de CSS peint une ombre autour du cadre d'un élément, et c'est l'un des outils les plus importants pour donner à une interface web plate une impression de profondeur et de hiérarchie. Une ombre bien dosée indique à l'utilisateur qu'une carte se trouve au-dessus de la page, qu'un bouton peut être pressé, qu'un menu déroulant flotte au-dessus du contenu situé en dessous. La propriété est trompeusement riche : une seule déclaration contrôle un décalage horizontal, un décalage vertical, un rayon de flou, un rayon d'étalement, une couleur et le fait que l'ombre tombe à l'extérieur de l'élément ou soit creusée à l'intérieur en tant qu'inset. Faire en sorte que ces valeurs paraissent naturelles en modifiant des nombres à l'aveugle est lent, ce qui est exactement la raison pour laquelle un générateur visuel aide.
Questions fréquentes
Quelque chose est-il téléversé lorsque je conçois une ombre ?
Que contrôle chaque valeur de box-shadow ?
Quelle est la différence entre le flou et l'étalement ?
Que fait l'option inset ?
Pourquoi la couleur générée utilise-t-elle rgba au lieu d'une valeur hexadécimale ?
Puis-je créer plusieurs ombres empilées ?
Ces ombres fonctionnent-elles dans tous les navigateurs ?
Comment faire une ombre douce et réaliste plutôt qu'une ombre dure ?
À propos de Générateur de box-shadow CSS
Ce générateur vous offre une boîte d'aperçu en direct et un curseur pour chaque paramètre afin que vous voyiez l'effet de chaque changement instantanément. Les valeurs de décalage déplacent l'ombre à gauche, à droite, vers le haut ou vers le bas pour suggérer une source de lumière. Le rayon de flou adoucit le bord, zéro produisant une ombre à bord net et des valeurs plus grandes une lueur diffuse. Le rayon d'étalement agrandit ou rétrécit l'ombre avant que le flou ne soit appliqué, ce qui est utile pour resserrer ou élargir l'empreinte. Un sélecteur de couleur et un curseur d'opacité se combinent dans la couleur finale de l'ombre, et une case inset bascule entre une ombre portée extérieure et une ombre intérieure qui fait paraître un élément enfoncé ou en retrait.
À mesure que vous ajustez les commandes, l'outil écrit la déclaration box-shadow exacte en CSS standard, sans préfixe de fournisseur, prête à copier dans votre presse-papiers en un clic. La sortie utilise une couleur rgba afin que l'opacité soit intégrée correctement, ce qui est la façon dont les ombres du monde réel sont presque toujours écrites, car le noir pur à pleine intensité paraît lourd et artificiel. L'aperçu repose sur un damier afin que vous puissiez juger avec précision les ombres douces et semi-transparentes plutôt que contre une seule couleur plate.
Tout s'exécute localement dans votre navigateur, sans téléversement, sans compte et sans suivi, et cela continue de fonctionner hors ligne une fois la page chargée. Il n'y a rien à envoyer où que ce soit car tout le travail consiste à générer une courte chaîne de CSS. Le résultat est une façon rapide et tactile de régler l'élévation précise dont un composant a besoin et de copier un code prêt pour la production sans mémoriser l'ordre des valeurs de box-shadow ni ajuster à la main l'alpha du rgba par tâtonnements.
Comment les ombres sont arrivées, ont disparu et sont revenues dans le design web
Avant CSS3, mettre une ombre sur une boîte signifiait des images. Les concepteurs exportaient les bords de l'ombre sous forme de tranches PNG et les assemblaient autour d'un élément avec des div d'enveloppe supplémentaires, une technique fragile qui se brisait chaque fois que la boîte changeait de taille et ajoutait plusieurs requêtes HTTP par composant. La propriété box-shadow, normalisée dans le cadre du module CSS Backgrounds and Borders, est arrivée avec des préfixes de fournisseur vers 2009 sous la forme de -webkit-box-shadow et -moz-box-shadow, et atteindre tous les navigateurs a pris quelques années de plus jusqu'à ce qu'Internet Explorer 9 ajoute la prise en charge.
Une fois les ombres natives disponibles, le web a traversé une phase fortement ombrée. Le design skeuomorphique, qui a atteint son apogée au début des années 2010 et a été incarné par les interfaces iOS d'Apple de cette époque, s'est fortement appuyé sur les ombres, les dégradés et les biseaux pour faire imiter aux éléments à l'écran des objets physiques : des boutons qui semblaient taillés dans le verre, des panneaux en cuir cousu, des interrupteurs aux ombres portées profondes. La propriété box-shadow était centrale dans ce style, souvent empilée sur plusieurs couches sur un seul élément.
Puis le balancier a oscillé. Le design plat, popularisé par le langage Metro de Microsoft et la propre refonte d'iOS 7 d'Apple en 2013, a dépouillé les ombres presque entièrement au profit de la couleur unie et d'une typographie épurée. Mais la platitude pure rendait difficile de savoir ce qui était cliquable, alors une voie intermédiaire a émergé. Le Material Design de Google a recadré les ombres non pas comme une décoration mais comme un système d'élévation, où la taille et la douceur d'une ombre communiquent à quelle hauteur un élément flotte au-dessus de la surface située en dessous. Cette idée demeure la convention dominante aujourd'hui, ce qui explique pourquoi penser aux ombres en termes d'élévation, plutôt que simplement d'obscurité, produit des interfaces qui paraissent cohérentes et intuitives.