Card Shadow CSS — Code subtil de l'ombre de la boîte
Créez visuellement du code CSS box-shadow : curseurs pour le décalage, le flou, la répartition, la couleur avec opacité, le mode incrustation et jusqu'à quatre calques avec un aperçu en direct.
Résultat
Cette page ouvre le préréglage du générateur d'ombres de boîte sur une ombre de carte classique : 2 px vers le bas, 8 px de flou, 15 % d'opacité noire. Il est délibérément silencieux – suffisamment pour séparer une carte de la page sans s'annoncer – et l'aperçu montre exactement à quel point il est silencieux.
Cette plage correspond aux étapes d'élévation les plus basses dans la plupart des systèmes de conception : cartes de liste, menus déroulants, popovers et lignes de tableau en survol. Si vous avez besoin d'une portance plus forte pour les modaux ou les panneaux flottants, augmentez le décalage Y et floutez ensemble - ils doivent croître proportionnellement pour que la source de lumière reste crédible.
Copiez la ligne d'ombre de boîte dans vos styles de composants ou dupliquez-la en tant que deuxième calque avec un flou plus serré pour ajouter une définition des bords. L'outil est gratuit et fonctionne entièrement dans votre navigateur.