Générateur de Box Shadow
Empilez plusieurs ombres, ajustez chacune avec x/y/flou/étendue/couleur/opacité/inset et prévisualisez sur une carte, un bouton, un cercle ou un champ de saisie. 13 préréglages prêts pour la production, dont les niveaux Material, le Neumorphism, le Neon Glow et le Long Shadow. Sortie en CSS pur ou en classe Tailwind à valeur arbitraire.
Everything runs in your browser. Nothing is uploaded.
Comment utiliser ce générateur de box shadow
- Choisissez un préréglage de départ ou cliquez sur '+ Ajouter une couche' pour construire de zéro.
- Ajustez x, y, flou, étendue, couleur, opacité et inset pour chaque couche.
- Réordonnez les couches avec les boutons ↑↓ (le haut est le plus proche de l'élément).
- Changez la forme d'aperçu (carte / bouton / cercle / champ de saisie) et ajustez la couleur d'arrière-plan et de l'élément.
- Copiez le CSS ou la classe Tailwind à valeur arbitraire.
Questions fréquentes
Quelle est la différence entre le flou et l'étendue ?
Le flou adoucit le bord de l'ombre — plus il est élevé, plus l'ombre est douce. L'étendue agrandit ou réduit l'ombre avant le flou — positif agrandit, négatif réduit.
Qu'est-ce que l'inset ?
Les ombres inset sont dessinées à l'intérieur de l'élément plutôt qu'à l'extérieur, donnant l'impression que l'élément est enfoncé ou creusé.
Pourquoi empiler plusieurs ombres ?
Les ombres réelles sont stratifiées — une ombre nette proche de l'élément combinée à une ombre douce plus éloignée paraît plus naturelle. Material Design utilise 2 à 3 couches.
La classe Tailwind fonctionne-t-elle dans tous les projets ?
Elle utilise la syntaxe de valeur arbitraire de Tailwind (`shadow-[...]`), qui nécessite Tailwind v3+ avec JIT/valeurs arbitraires.