box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Générateur en ligne gratuit d'ombre CSS — Constructeur d'ombres visuel

Concevez des ombres CSS élégantes visuellement avec un aperçu en temps réel. Ce générateur d'ombres CSS gratuit prend en charge plusieurs calques, des modèles prédéfinis, des ombres intérieures et génère instantanément du code CSS prêt à l'emploi.

Qu'est-ce qu'un générateur d'ombre CSS ?

Un générateur d'ombre CSS est un outil visuel qui aide les designers et les développeurs web à créer des valeurs box-shadow sans avoir à écrire manuellement des valeurs en pixels. Au lieu de deviner des chiffres et de rafraîchir votre navigateur, vous ajustez des curseurs et voyez le résultat en temps réel.

La propriété CSS box-shadow ajoute des effets d'ombre autour du contour d'un élément. C'est l'une des propriétés CSS les plus couramment utilisées pour créer de la profondeur, de l'élévation et une hiérarchie visuelle dans les interfaces web modernes.

Comment utiliser ce générateur d'ombre CSS

1. Choisissez un modèle prédéfini — Commencez avec une ombre subtile, moyenne ou forte, ou commencez à partir de zéro.
2. Ajustez les curseurs — Contrôlez le décalage X, le décalage Y, le flou, la diffusion, la couleur et l'opacité.
3. Activez l'ombre intérieure — Alternez entre une ombre extérieure et une ombre intérieure.
4. Ajoutez des calques — Empilez plusieurs ombres pour des effets complexes.
5. Personnalisez l'aperçu — Changez les couleurs d'arrière-plan et de boîte pour correspondre à votre conception.
6. Copiez le CSS — Cliquez sur le bouton de copie et collez le code dans votre feuille de style.

Fonctionnalités principales

Fonctionnalité	Avantage
Aperçu en temps réel	Voir les changements instantanément en ajustant les curseurs
6 modèles prédéfinis	Début rapide avec des styles d'ombres courants
Plusieurs calques	Empilez des ombres pour des effets complexes et réalistes
Prise en charge de l'ombre intérieure	Créez des ombres intérieures pour des éléments enfoncés
Sélecteur de couleur	Contrôle complet sur la couleur de l'ombre
Contrôle de l'opacité	Ajustez finement la transparence de l'ombre
Copie vers le presse-papiers	Exportation en un clic du CSS

Comprendre l'ombre CSS

La syntaxe

La propriété CSS box-shadow suit cette syntaxe :

box-shadow: [inset] offsetX offsetY blur spread color;

Valeur	Description	Exemple
inset	(Optionnel) Rend l'ombre intérieure	inset
offsetX	Décalage horizontal — positif = à droite, négatif = à gauche	4px
offsetY	Décalage vertical — positif = vers le bas, négatif = vers le haut	4px
blur	Rayon de flou — plus élevé = ombre plus douce	12px
spread	Étendue — positif = plus grand, négatif = plus petit	0px
color	Couleur de l'ombre avec transparence alpha	rgba(0,0,0,0.1)

Ombres multiples

Vous pouvez empiler plusieurs ombres en les séparant par des virgules :

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

Cela crée une ombre à deux calques : une ombre serrée et sombre près de l'élément, et une ombre plus douce et plus claire qui s'étend plus loin — produisant un effet de profondeur plus réaliste.

Comparaison des styles d'ombre

Style	CSS	Cas d'utilisation
Subtil	0 1px 3px rgba(0,0,0,0.08)	Cartes, éléments de liste
Moyen	0 4px 6px rgba(0,0,0,0.1)	Boutons, modals
Fort	0 10px 15px rgba(0,0,0,0.15)	Dialogues, popovers
Éclat	0 0 20px rgba(59,130,246,0.4)	États de focus, CTAs
Intérieur	inset 0 2px 4px rgba(0,0,0,0.1)	Champs de saisie, puits
Dur	4px 4px 0 rgba(0,0,0,0.25)	UI rétro/brutaliste

Cas d'utilisation réels

Élévation Material Design

Material Design utilise des ombres pour indiquer les niveaux d'élévation. Une carte de niveau 1 utilise 0 1px 3px rgba(0,0,0,0.12), tandis qu'un dialogue de niveau 4 utilise 0 12px 17px rgba(0,0,0,0.14).

Effets au survol

Profondez l'ombre au survol pour créer un effet de "levage" :

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

États de focus

Utilisez un éclat coloré pour des indicateurs de focus accessibles :

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Neumorphism

Combinez des ombres intérieures et extérieures avec la même couleur que l'arrière-plan pour un look souple et extrudé.

Conseils pour de meilleures ombres

Conseil	Explication
Gardez le flou subtil	Un flou excessif semble artificiel. Commencez par 4–12px pour la plupart des éléments d'interface utilisateur.
Utilisez une faible opacité	Les ombres dans la vie réelle ne sont pas entièrement opaques. Une opacité de 5–15 % semble la plus naturelle.
Adaptez-vous à votre arrière-plan	Sur des arrière-plans sombres, utilisez des ombres plus claires.
Évitez les ombres trop grandes	Les ombres trop grandes peuvent rendre l'interface visuellement chargée.
Testez sur différents écrans	Les ombres peuvent se comporter différemment sur les écrans de petite taille.

Questions fréquemment posées

Quelle est la différence entre box-shadow et drop-shadow ?

box-shadow est spécifique aux éléments HTML et crée des ombres autour des éléments, tandis que drop-shadow est une fonction de filtre qui peut être appliquée à n'importe quel élément. box-shadow est plus performant et plus simple à utiliser pour les ombres de base.

Pourquoi mes ombres ne s'affichent-elles pas correctement sur les appareils mobiles ?

Les ombres peuvent parfois être tronquées ou mal rendues sur les appareils mobiles en raison des limites de la mise en page mobile. Assurez-vous que les éléments avec des ombres ont un espace suffisant et que les ombres sont bien intégrées dans la conception responsive.

Puis-je utiliser des ombres avec des transitions CSS ?

Oui, les ombres peuvent être animées avec des transitions CSS. Par exemple, vous pouvez créer un effet de flottement en animant le box-shadow avec une transition douce.