Aller au contenu
SPCXTools

Générateur de box-shadow

Ajustez des ombres douces, nettes, superposées ou internes avec un aperçu en direct et copiez le CSS.

Fonctionne en local — vos fichiers ne quittent pas votre appareil

Chargement de l’outil…

Comment utiliser : Générateur de box-shadow

  1. 1Partez d'un préréglage comme Douce, Superposée ou Interne, ou ajustez l'ombre par défaut.
  2. 2Faites glisser les curseurs pour le décalage horizontal et vertical, le flou, l'étendue et l'opacité, puis choisissez une couleur d'ombre.
  3. 3Ajoutez d'autres couches pour une profondeur réaliste, et définissez le rayon des angles et les couleurs d'aperçu.
  4. 4Copiez le CSS et collez-le dans votre feuille de style.

Créer des ombres CSS visuellement

Les ombres donnent de la profondeur aux interfaces : elles détachent les cartes de la page, indiquent quel bouton est cliqué et séparent une boîte de dialogue du contenu en arrière-plan. La propriété CSS box-shadow est puissante, mais ses cinq valeurs sont difficiles à ajuster à l'aveugle. Ce générateur vous offre des curseurs et un aperçu en direct, permet de superposer plusieurs ombres pour un rendu naturel, et génère un code CSS propre que vous pouvez coller directement dans votre projet.

Fonctionnalités

  • Contrôles de décalage, flou, étendue, couleur et opacité avec aperçu instantané.
  • Jusqu'à cinq couches combinées en une seule déclaration box-shadow.
  • Ombres internes pour les effets de pression et de creux.
  • Rayon d'angle et couleurs d'aperçu pour correspondre à votre design.
  • Préréglages pour des ombres douces, moyennes, dures, superposées, internes et des effets de lueur.
  • Code CSS prêt à copier avec des couleurs au format rgba().

Exemple

Une ombre superposée au rendu naturel sur les fonds clairs :

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Conseils pour le design des ombres

Objectif Paramètres suggérés
Carte subtile sur fond blanc y 4, flou 12, opacité 8 %
Menu déroulant ou modale flottante 2–3 couches, y jusqu'à 24, flou jusqu'à 48, opacité 7–12 % chacune
Style rétro "flat" x 6, y 6, flou 0, opacité 100 %
Effet de focus ou de lueur x 0, y 0, flou 16–24, étendue 2–4, couleur de la marque
Champ de saisie enfoncé inset, y 2, flou 6, opacité 25–30 %

Gardez une source de lumière cohérente : si les ombres tombent vers le bas sur un composant, elles doivent tomber vers le bas partout.

Outils associés

Créez l'arrière-plan de vos cartes avec le Générateur de dégradés CSS, convertissez les couleurs entre HEX, RGB et HSL avec le Convertisseur de couleurs, ou récupérez les couleurs d'une capture d'écran avec le Sélecteur de couleurs d'image.

Questions fréquentes

Que signifient les quatre valeurs de box-shadow ?
Dans l'ordre, il s'agit du décalage horizontal (positif vers la droite), du décalage vertical (positif vers le bas), du rayon de flou (plus il est grand, plus l'ombre est douce) et de l'étendue (positive, l'ombre est plus grande que l'élément ; négative, elle est plus petite). La couleur vient en dernier.
Pourquoi utiliser plusieurs couches d'ombre ?
Les ombres réelles sont nettes et foncées près d'un objet, puis douces et diffuses plus loin. Superposer deux ou trois ombres avec un décalage et un flou croissants mais une faible opacité imite cet effet et donne un rendu bien plus naturel qu'une seule ombre trop marquée.
Qu'est-ce qu'une ombre interne ?
Une ombre interne (inset) est dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur, donnant l'impression qu'il est enfoncé. Elle est souvent utilisée pour les champs de saisie, les boutons pressés et les zones en creux.
Pourquoi mon ombre paraît-elle grise sur un fond coloré ?
Les ombres noires paraissent ternes sur des surfaces colorées. Pour l'ombre, essayez d'utiliser une nuance plus foncée de la couleur de fond plutôt que du noir pur : le rendu sera plus riche et plus naturel.
Les box-shadow affectent-elles les performances ?
Quelques ombres consomment peu de ressources. Cependant, de très grands rayons de flou sur de nombreux éléments, ou l'animation de box-shadow au défilement, peuvent ralentir le rendu sur les téléphones moins performants. Pour animer une ombre, faites plutôt varier l'opacité d'un pseudo-élément qui contient cette ombre.

Outils similaires

Générateur de dégradé CSSCréez visuellement un arrière-plan en dégradé et copiez le code CSS — linéaire, radial ou conique.Convertisseur de couleursConvertissez n'importe quelle couleur entre les formats HEX, RGB, HSL, HSV et CMYK, et vérifiez son contraste.Sélecteur de couleur d'imageCliquez n'importe où sur une image pour obtenir ses codes couleur exacts (HEX, RGB et HSL) — ainsi que sa palette de couleurs principales.Simulateur de daltonismePrévisualisez vos images à travers les yeux d'une personne daltonienne pour garantir l'accessibilité de vos designs.Vérificateur de contraste de couleursVérifiez si votre texte est suffisamment lisible — et obtenez la couleur la plus proche qui respecte les normes WCAG.Générateur de palette de couleursChoisissez une couleur et obtenez une palette harmonieuse de cinq couleurs basée sur la théorie des couleurs.