Design · CSS

Generateur de Box Shadow

Concevez des ombres CSS box-shadow multicouches de facon interactive. Controlez chaque couche — decalage, flou, diffusion, couleur et interne — puis copiez en CSS ou Tailwind.

In-browser only CSS · Tailwind Multi-layer shadows

Preselections

Apercu

Taille de l'element

Rayon de bordure

Couleur de l'element

Couches d'ombre

Resultat

0 4px 10px 0 rgba(0,0,0,0.25)

Comment utiliser

Creer une ombre en quatre etapes

1
Partez d'une preselection ou d'une couche vierge
Cliquez sur une preselection dans la galerie pour la charger instantanement, ou partez de la couche unique par defaut.
2
Ajustez les parametres de la couche
Developpez une carte de couche pour acceder aux controles Decalage X, Decalage Y, Flou, Diffusion, Couleur et Interne. Glissez les curseurs ou saisissez des valeurs directement.
3
Ajoutez des couches pour la profondeur
Cliquez sur "Ajouter une couche" (ou Ctrl/Cmd+N) pour empiler des ombres. Reordonnez-les avec les boutons haut/bas.
4
Copiez et collez
Choisissez le format CSS ou Tailwind, puis cliquez sur Copier. La valeur est prete a etre collee dans votre feuille de style.

Reference des parametres

Guide des parametres box-shadow

Guide des parametres box-shadow
Parametre	Plage	Defaut	Notes
Decalage X	−100 a 100 px	0	Position horizontale; les valeurs negatives deplacent l'ombre a gauche.
Decalage Y	−100 a 100 px	4 px	Position verticale; les valeurs positives deplacent l'ombre vers le bas.
Rayon de flou	0 a 200 px	10 px	Des valeurs plus elevees produisent des ombres plus douces.
Rayon de diffusion	−100 a 100 px	0	Les valeurs positives agrandissent l'ombre; les negatives la retrecissent.
Couleur	Tout RGBA	rgba(0,0,0,0.25)	Utilisez du noir semi-transparent pour des ombres naturelles.
Interne	Oui / Non	Non	Place l'ombre a l'interieur de l'element.

Conseils

Conseils de conception d'ombres

Combinez ombres claires et sombres pour le realisme

Essayez une grande couche de flou avec faible opacite combinee avec une petite couche plus opaque pres de l'element.
Gardez une opacite faible pour une elevation subtile

Pour les cartes et boutons, des ombres rgba(0,0,0,0.04-0.12) paraissent naturelles sur fonds clairs et sombres.
Utilisez les ombres internes pour les etats enfonces

Une ombre interne avec un petit flou cree un effet convaincant d'element enfonce.
Testez sur differents fonds

Utilisez le selecteur de fond pour verifier votre ombre sur des fonds clairs, sombres et personnalises.

Questions frequentes

Comment creer une ombre multicouche ?

Cliquez sur "Ajouter une couche" ou appuyez sur Ctrl/Cmd+N. Chaque couche possede ses propres parametres. Le CSS final combine toutes les couches activees, separees par des virgules.

Quelle est la difference entre diffusion et flou ?

Le rayon de flou adoucit le bord de l'ombre. Le rayon de diffusion redimensionne l'ombre avant l'application du flou.

Comment fonctionnent les ombres internes ?

Les ombres internes apparaissent a l'interieur de l'element plutot qu'a l'exterieur, utiles pour les etats enfonces et les lueurs interieures.

Comment utiliser la sortie Tailwind ?

Selectionnez le format Tailwind et copiez la valeur. Collez-la comme classe dans votre HTML Tailwind.

Puis-je partager mon design d'ombre ?

Oui. Cliquez sur Partager pour encoder la configuration dans l'URL. Copiez et partagez l'URL.

Comment annuler une modification ?

Appuyez sur Ctrl/Cmd+Z pour annuler. Jusqu'a 30 etapes d'historique sont conservees par session.