Générez des box-shadows CSS avec prévisualisation en direct. Ajoutez plusieurs couches d'ombre pour la profondeur et le réalisme, puis copiez le CSS.
Faites glisser les curseurs pour ajuster le décalage horizontal, le décalage vertical, le rayon de flou, l'extension, la couleur et l'opacité d'une box-shadow CSS. Cochez Inset pour un effet d'ombre intérieure. La prévisualisation se met à jour en direct et le CSS généré est prêt à copier directement dans votre feuille de style.
Utilisez les curseurs pour ajuster chaque paramètre d'ombre. Cochez Inset pour en faire une ombre intérieure. Cliquez sur l'échantillon de couleur pour changer la couleur de l'ombre. Le CSS généré se met à jour en direct dans le bloc de code sombre — cliquez sur Copier pour l'obtenir.
Les ombres sont l’un des moyens les plus rapides d’indiquer à un utilisateur ce qui se situe au-dessus de la page, ce qui peut être pressé et ce qui doit sembler séparé du fond. En pratique, l’intérêt n’est pas d’écrire la syntaxe box-shadow de mémoire. Il est de trouver un traitement de profondeur qui convienne au composant, au fond et au reste de l’interface.
Cet outil transforme cette recherche en un processus d’ajustement visible plutôt qu’en tâtonnements à partir de chiffres bruts.
Cet outil est utile parce qu’il rend ce tâtonnement visible et contrôlable.
Une ombre bien dosée peut détacher un panneau juste assez pour qu’il soit perçu comme sa propre couche.
Certains contrôles ont besoin de profondeur pour paraître activables. Trop peu et ils semblent plats ; trop et ils deviennent lourds ou datés.
Une UI flottante doit se distinguer visuellement du contenu derrière elle. Les ombres sont l’un des moyens les plus simples de créer cette séparation.
Si un composant a besoin d’une énorme ombre pour être remarqué, le problème vient peut-être davantage de la hiérarchie de la mise en page que de l’ombre elle-même.
Les ombres lourdes rendent vite une interface boueuse. De petites augmentations ont souvent un effet plus fort que prévu.
Une ombre qui marche sur une page blanche peut sembler complètement fausse sur une surface sombre ou visuellement chargée.
C’est un bon cas d’usage parce que de petites différences visuelles comptent, et qu’on a souvent besoin de quelque chose de plus subtil que ce qu’on écrirait de mémoire.
Les ombres inset sont utiles lorsqu’un champ ou un contrôle doit paraître enfoncé plutôt que surélevé.
Si une équipe utilise déjà un style d’ombre précis, un générateur facilite la reproduction et la réutilisation exactes au lieu de l’approximation à l’œil.
Cet outil génère du CSS d’ombre. Il ne décide pas si le composant devrait appartenir à une couche plus haute, si tout le système visuel est équilibré ou si l’effet convient partout. Il aide avec l’ombre elle-même, pas avec toute la hiérarchie de l’interface.
Les ombres sont de ces détails qu’on ne remarque que lorsqu’ils sonnent faux. Un générateur aide à arriver plus vite au rendu qui “tombe juste”, avec moins d’ajustements arbitraires.
L'extension agrandit (valeur positive) ou réduit (valeur négative) l'ombre avant l'application du flou. Une extension positive rend l'ombre plus grande que l'élément ; négative la rend plus petite.
CSS prend en charge plusieurs box-shadows sous forme de liste séparée par des virgules. Générez chaque ombre ici séparément et combinez-les manuellement : box-shadow: ombre1, ombre2;
Cet outil fonctionne entièrement dans votre navegador. Rien de ce que vous tapez ou collez n'est envoyé à un serveur — tout le traitement se fait localement sur votre appareil.