Ombre de carte CSS — Code box-shadow subtil
Créez du code CSS box-shadow visuellement : des curseurs pour le décalage, le flou, l'étalement, la couleur avec opacité, le mode inset et jusqu'à quatre couches avec un aperçu en direct.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de box-shadow avec un préréglage d'ombre de carte classique : 2px vers le bas, flou de 8px, opacité du noir à 15 %. C'est délibérément discret — assez pour séparer une carte de la page sans s'annoncer — et l'aperçu montre exactement à quel point c'est discret.
Cette plage correspond aux échelons d'élévation les plus bas dans la plupart des design systems : cartes de liste, menus déroulants, popovers et lignes de tableau au survol. Si vous avez besoin d'un soulèvement plus fort pour les modales ou les panneaux flottants, augmentez ensemble le décalage Y et le flou — ils doivent croître proportionnellement pour garder la source de lumière crédible.
Copiez la ligne box-shadow dans les styles de votre composant, ou dupliquez-la en deuxième couche avec un flou plus serré pour ajouter de la définition au bord. L'outil est gratuit et fonctionne entièrement dans votre navigateur.