Composez une propriété box-shadow CSS

Avec Générateur d'ombre, les designers et intégrateurs web peuvent ajuster une interface avant son intégration. Composez une propriété box-shadow CSS.

Composez une propriété box-shadow CSS. L’outil reste gratuit dans votre navigateur et ne demande aucun compte pour afficher le résultat.

Mode d’emploi

Saisissez la position horizontale et verticale de l'ombre, puis le flou et l'étalement.
Indiquez la couleur au format hexadécimal, par exemple avec six chiffres précédés du signe dièse.
Cliquez sur le bouton de génération pour obtenir la propriété box-shadow complète.
Copiez la règle produite et collez-la dans votre feuille de style pour l'appliquer.
Ajustez les valeurs si le rendu ne correspond pas à l'effet recherché.

Exemple

L'exemple fourni décrit une ombre décalée avec un flou et une couleur sombre. Après génération, le résultat montre la propriété box-shadow correspondante. Vous pouvez modifier une valeur à la fois pour voir comment chaque réglage influence l'ombre.

Entrée

Résultat

box-shadow: 4px 4px 10px 0px #333333;

Limites et formats

L'outil ne prévisualise pas l'ombre sur un élément ; il fournit uniquement le code CSS.
Les valeurs de décalage, de flou et d'étalement doivent être numériques et peuvent être négatives pour le décalage.
La couleur doit être valide au format hexadécimal ; une couleur mal formée empêche la génération.
Le rendu final dépend du navigateur et du contexte de l'élément.

Où le traitement a lieu

Tout se déroule dans votre navigateur. Les réglages saisis restent sur votre appareil et ne sont ni transmis ni stockés. La propriété CSS est assemblée localement, sans aucune connexion externe.

Questions fréquentes

Quelles unités dois-je utiliser pour les décalages et le flou ?

Les valeurs sont généralement sans unité pour les décalages et le flou, car elles représentent des pixels. Vous pouvez aussi ajouter une unité comme px ou rem. Gardez la même logique pour toutes les valeurs.

Puis-je mettre une couleur transparente ?

Le champ attend une couleur hexadécimale. Pour une ombre transparente, vous pouvez utiliser une couleur avec un canal alpha si le format le permet, mais le plus simple est de choisir une couleur pleine puis d'ajuster l'opacité dans votre CSS.

Pourquoi mon ombre ne s'affiche-t-elle pas ?

Vérifiez que la propriété est bien appliquée à un élément ayant une taille visible. Une valeur de flou ou d'étalement trop faible peut rendre l'ombre invisible. Assurez-vous aussi que la couleur n'est pas identique à l'arrière-plan.