Handytool
DéveloppeurGratuitExécuté localement

Générateur de box-shadow CSS

Concevez les valeurs CSS box-shadow avec un aperçu en direct — décalages, flou, propagation, opacité et intérieur.

Aperçu
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Ajustez les curseurs pour concevoir l'ombre — copiez le CSS quand c'est bon.

À propos de Générateur de box-shadow CSS

Le générateur box-shadow de Handytool vous offre des curseurs pour le décalage, le flou, la propagation, la couleur et l'opacité — et une carte d'aperçu en direct qui se met à jour au fur et à mesure que vous faites glisser. Activez/désactivez les ombres intérieures, choisissez une couleur via le sélecteur et copiez la déclaration CSS box-shadow résultante directement dans votre feuille de styles. L'outil entier s'exécute dans votre navigateur ; rien n'est téléchargé.

Fonctionnalités de Générateur de box-shadow CSS

  • 01

    Chaque paramètre comme un curseur

    Les décalages horizontaux et verticaux, le rayon de flou, le rayon de propagation et l'opacité ont chacun leur propre curseur plus une entrée numérique — affinage précis par glissement, puis ajustement au clavier pour la précision au pixel.

  • 02

    Ombres intérieures supportées

    Basculez le commutateur intérieur pour passer d'une ombre portée à une ombre intérieure — utile pour les boutons appuyés, les entrées enfoncées et les surfaces neumorphiques.

  • 03

    Couleur + opacité, séparément

    Choisissez la couleur de base dans n'importe quelle valeur hexadécimale, puis ajustez l'opacité indépendamment. La sortie utilise rgba() afin que la couleur et l'alpha restent lisibles lorsque vous copiez le CSS.

FAQ Générateur de box-shadow CSS

Que fait la valeur de propagation ?
La propagation positive agrandit l'ombre dans toutes les directions avant l'application du flou ; la propagation négative la rétrécit. C'est utile pour les lueurs serrées et définies lorsqu'elles sont associées à un petit flou.
Puis-je ajouter plusieurs ombres ?
Ce générateur produit une déclaration d'ombre unique. Pour superposer les ombres, copiez la valeur, puis collez-la deux fois dans votre CSS séparée par une virgule — box-shadow accepte une liste séparée par des virgules.
Pourquoi mon ombre intérieure est-elle invisible ?
Les ombres intérieures sont dessinées à l'intérieur de l'élément, elles ont donc besoin d'une couleur d'arrière-plan ou d'un remplissage pour être visibles. Elles n'apparaîtront pas non plus sur les éléments transparents ou de taille zéro.
L'aperçu est-il précis au pixel ?
Oui — l'aperçu utilise la propriété CSS box-shadow réelle sur un élément réel, donc ce que vous voyez est exactement ce que votre feuille de styles rendra.

Outils liés

Développeur →

Explorez d'autres outils

Tous les outils →