Générateur d'ombres CSS avec aperçus de cartes | We.Inc
Créez des ombres CSS en couches et voyez-les sur de vraies cartes de service et de prix, sur fonds clairs et sombres, avec un état de focus visible. Copiez le CSS et un composant de carte prêt à l'emploi.
Les ombres sont difficiles à juger sur un carré gris. Ici, vous ajustez une box-shadow en couches et la voyez sur une carte de service et une carte de prix, sur une page claire ou sombre, avec un anneau de focus clavier que vous pouvez tester avec Tab. Copiez le CSS ou tout le composant de carte quand le rendu vous convient. Tout se passe dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à We.Inc ni à personne d'autre, et tout disparaît quand vous fermez l'onglet.
Partez d'un préréglage ou ajustez la première couche : décalage horizontal et vertical, flou, étalement, couleur, opacité et inset.
Ajoutez jusqu'à cinq couches. Les ombres en couches (une serrée plus une large et douce) paraissent plus naturelles qu'une seule grande ombre.
Basculez l'aperçu entre une page claire et une page sombre. Appuyez sur Tab pour déplacer le focus sur les boutons de la carte et vérifiez que l'anneau de focus reste visible.
Les vérifications avertissent quand l'ombre est trop faible pour être vue sur le fond choisi et quand le texte de la carte tombe sous le contraste WCAG AA.
Copiez la déclaration box-shadow, ou le composant de carte complet avec HTML et CSS.
Sur les fonds sombres, les ombres disparaissent presque. Utilisez une couleur de carte légèrement plus claire ou une fine bordure pour séparer la carte à la place.
Gardez la couleur de l'ombre teintée vers votre fond plutôt que noir pur pour un rendu plus doux.
Ne comptez jamais sur une ombre seule pour montrer le focus. Utilisez aussi un contour net.
Les grandes valeurs de flou sont plus coûteuses à dessiner. Évitez de les animer sur de longues listes.
Utilisez un ou deux niveaux d'ombre sur tout le site, pour que la profondeur signifie quelque chose.
Questions fréquentes
Comment fonctionne la propriété CSS box-shadow ?
box-shadow prend un décalage horizontal, un décalage vertical, un rayon de flou optionnel, un étalement optionnel et une couleur, plus le mot-clé inset pour les ombres intérieures. Plusieurs ombres peuvent être listées, séparées par des virgules ; la première est dessinée par-dessus.
Pourquoi les ombres en couches paraissent-elles mieux ?
Les objets réels projettent une ombre nette près d'eux et une ombre douce et large plus loin. Deux ou trois couches avec un flou croissant et une opacité décroissante imitent cela.
Pourquoi mon ombre est-elle invisible sur un fond sombre ?
Une ombre sombre sur une page sombre n'a presque aucun contraste. L'outil vous en avertit. Faites plutôt ressortir la carte avec une couleur de surface plus claire ou une bordure discrète.
box-shadow affecte-t-il l'accessibilité ?
Les ombres sont décoratives, elles n'ont donc pas besoin de respecter les règles de contraste elles-mêmes. Ce qui compte, c'est que le texte sur la carte reste lisible et que le focus soit montré par un contour visible, pas seulement un changement d'ombre.
Le générateur d'ombres CSS est-il gratuit ?
Oui, sans inscription. Copiez le code dans n'importe quel projet.
Testez les ombres sur les composants que vous allez déployer
Une ombre qui paraît juste sur un carré isolé peut sembler lourde sur une rangée de cartes de prix ou disparaître sous une photo. La prévisualiser sur les cartes qu'un site de petite entreprise utilise réellement, une carte de service avec une icône et un plan tarifaire mis en avant, montre le résultat que vous obtiendrez.
Le code du composant inclut un contour focus-visible, pour que la carte reste utilisable au clavier quelle que soit l'ombre choisie.