Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.
Ce que fait cet outil
Le générateur d'ombre CSS crée une box-shadow à l'aide de curseurs pour le décalage horizontal, le décalage vertical, le flou, l'étendue, la couleur et l'opacité. L'aperçu se met à jour pendant que vous faites glisser les curseurs, et la ligne de résultat est prête à copier. Il s'ouvre sur une ombre douce, 10px sous le bloc, avec 20px de flou et un noir à 25 %.
Les quatre longueurs sont écrites dans l'ordre CSS : décalage x, décalage y, rayon de flou, rayon d'étendue. Des décalages positifs déplacent l'ombre vers la droite et vers le bas ; des valeurs négatives la déplacent vers la gauche et vers le haut. Le flou adoucit le bord, et l'étendue agrandit ou réduit l'ombre avant le flou. La couleur est écrite en rgba() : l'opacité est ainsi intégrée et l'ombre se fond dans n'importe quel arrière-plan.
Quand l'utiliser
- Donner de la profondeur aux cartes, fenêtres modales et menus déroulants dans un design plat.
- Reproduire les niveaux d'élévation d'un design system comme Material Design.
- Ajouter un effet discret au focus ou au survol des boutons.
- Créer un halo coloré avec un décalage nul et une couleur vive.
Exemple concret
Entrée
X 0, Y 10, flou 20, étendue 0, couleur #000000, opacité 25 %Sortie
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Questions sur cet outil
Comment créer une ombre intérieure ?
Ajoutez le mot-clé inset au début de la valeur : box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. L'ombre est alors dessinée à l'intérieur du bloc, ce qui convient aux boutons enfoncés et aux champs de saisie.
Peut-on combiner plusieurs ombres ?
Oui, en les séparant par des virgules. Une élévation réaliste en utilise souvent deux : une petite ombre nette pour le bord et une grande ombre douce pour la profondeur, par exemple 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
Pourquoi mon ombre paraît-elle grise et sale sur un fond coloré ?
Un noir pur à faible opacité désature les couleurs en dessous. Pour un rendu plus propre, utilisez une teinte plus sombre de la couleur de fond plutôt que du noir.
Les ombres ralentissent-elles la page ?
Les ombres statiques coûtent peu. Animer une grande ombre floue peut faire perdre des images par seconde sur les appareils lents ; animez plutôt l'opacity d'un pseudo-élément qui porte l'ombre.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.