Collection d'ombres de boîte

• Copie CSS box-shadow instantanée : notre collection vous permet de copier n'importe quelle valeur CSS préréglée en un clic. Chaque carte montre un aperçu en direct de l'ombre appliquée à un vrai élément - aucune supposition, aucun ajustement manuel, juste copier-coller dans votre projet.
• Collection d'ombres de boîte en ligne sécurisée : la collection en ligne fonctionne entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur - votre flux de design reste totalement privé et fonctionne hors ligne une fois la page chargée.
• Plus de 40 préréglages dans 8 catégories : parcourez les ombres Élévation, Soft UI (neumorphisme), Colorées, Internes, Superposées, Lueur, Nettes et Minimales. Chaque catégorie couvre un motif de design distinct pour trouver le bon box-shadow dans tout contexte d'interface.
• 100 % gratuit - sans inscription : utilisez la collection gratuitement, sans compte, sans offre premium et sans limite d'utilisation. Recherchez, filtrez, prévisualisez et copiez autant d'ombres que nécessaire pour tout projet - totalement gratuit pour toujours.

• Style des cartes et panneaux d'interface : appliquez la bonne ombre d'élévation aux cartes, panneaux et conteneurs de contenu. La collection offre une échelle d'élévation complète de XS à 2XL pour correspondre à Material Design, Tailwind ou à vos propres jetons de design.
• Profondeur des boutons et CTA : ajoutez de la profondeur aux boutons principaux et aux éléments d'appel à l'action avec des ombres colorées ou superposées. La collection inclut des ombres colorées indigo, bleu, vert et violet qui s'accordent directement aux palettes de marque courantes.
• Effets de lueur en mode sombre : utilisez les préréglages de la catégorie Lueur pour des accents de type néon sur fonds sombres. La collection inclut des ombres de lueur blanches, indigo, cyan, vertes, roses et ambrées optimisées pour les surfaces d'interface en mode sombre.
• Soft UI et neumorphisme : construisez des interfaces neumorphiques avec les préréglages Soft UI - variantes en relief, enfoncées, concaves et plates pour fonds clairs et sombres. La collection inclut des valeurs prêtes pour les motifs neumorphiques les plus courants.
• Style des champs et formulaires : utilisez les ombres Internes et Minimales pour les champs de saisie, zones de texte et conteneurs de formulaire. La collection inclut des ombres internes subtiles, des anneaux de focus et des ombres remplaçant les bordures pour un design de formulaire accessible et soigné.
• Documentation du design system : copiez les valeurs d'ombre directement dans les fichiers de jetons de votre design system, la config Tailwind ou les propriétés personnalisées CSS. La collection fournit des préréglages nommés et catégorisés qui correspondent bien aux conventions de nommage des jetons.

La propriété CSS box-shadow ajoute un ou plusieurs effets d'ombre à la boîte d'un élément. Chaque ombre est définie par un décalage (X et Y), un rayon de flou, un rayon d'étalement facultatif, une couleur et le mot-clé facultatif inset. Plusieurs ombres peuvent être superposées en les séparant par des virgules, créant des effets de profondeur allant d'une élévation subtile à des lueurs spectaculaires. Notre collection fournit plus de 40 préréglages prêts à l'emploi pour trouver la bonne valeur box-shadow sans l'écrire de zéro.

1. Parcourez ou recherchez : utilisez les pilules de filtre de catégorie pour explorer les préréglages Élévation, Soft UI, Colorées, Internes, Superposées, Lueur, Nettes et Minimales - ou saisissez dans le champ de recherche pour trouver une ombre par nom, catégorie ou valeur CSS.
2. Prévisualisez en direct : chaque carte de la collection affiche un élément d'aperçu en direct avec l'ombre exacte appliquée, pour voir précisément le rendu avant de copier.
3. Copiez et utilisez : cliquez sur le bouton de copie d'une carte pour copier la déclaration complète box-shadow: …;, ou cliquez directement sur la valeur CSS pour copier uniquement la valeur. Collez-la dans votre CSS, votre config Tailwind ou votre fichier de jetons de design.

• Échelle d'élévation : ombres de XS à 2XL suivant les conventions d'élévation de Material Design et Tailwind pour une hiérarchie de profondeur cohérente.
• Soft UI / neumorphisme : ombres neumorphiques en relief, enfoncées, concaves et plates pour fonds clairs et sombres.
• Colorées et lueur : ombres aux couleurs de marque et effets de lueur néon pour interfaces en mode sombre, CTA et indicateurs d'état.
• Internes, nettes et minimales : ombres internes pour champs de formulaire, ombres nettes pour designs brutalistes et ombres minimales pour bordures et anneaux de focus.

La propriété box-shadow est prise en charge par tous les navigateurs modernes, et ce depuis IE9. Les ombres multicouches (séparées par des virgules) sont tout aussi bien prises en charge. Toute la navigation, la recherche et la copie de la collection s'exécutent localement dans votre navigateur - aucune donnée n'est jamais envoyée à un serveur.