ZenovayTools

Générateur d'ombre de boîte CSS

Concevez des effets CSS box-shadow visuellement avec plusieurs couches, support inset, contrôle de l'opacité et sortie CSS prête à copier.

Live preview

Preview background

Box color

Presets

Shadow Layers

px
px
px
px
%

CSS Output

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);

Comment utiliser Générateur d'ombre de boîte CSS

  1. 1Ajustez le décalage de l'ombre, le flou, la propagation et la couleur avec les curseurs.
  2. 2Ajoutez plusieurs couches d'ombre pour les effets complexes.
  3. 3Essayez des présets comme neumorphe, carte flottante ou luminescence.
  4. 4Copiez le code CSS généré pour votre projet.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.
Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Quelle est la syntaxe CSS box-shadow ?▾
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Exemple : box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2).
Quelle est la différence entre box-shadow et drop-shadow ?▾
box-shadow crée une ombre rectangulaire derrière le modèle de boîte. filter: drop-shadow() suit la forme visible de l'élément, y compris les zones transparentes.
Comment créer une ombre réaliste ?▾
Utilisez une opacité faible (10-30%), un léger décalage vers le bas, un flou modéré, une propagation nulle ou négative. Ajoutez une deuxième couche d'ombre ambiante pour plus de réalisme.
À quoi servent les ombres inset ?▾
Les ombres inset apparaissent à l'intérieur de l'élément, créant des effets enfoncés/en retrait. Utilisées pour les boutons enfoncés, les champs d'entrée, la conception neumorphe et les barres de progression.
Comment fonctionnent les ombres de boîte multiples ?▾
Les valeurs multiples sont séparées par des virgules et sont rendues dans l'ordre (la première en haut). Cela permet la profondeur en couches, les combos luminescence + ombre portée et les effets neumorphes.