ZenovayTools

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.

Shadow Layers

Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);

Comment utiliser Générateur d'Ombre de Boîte CSS

  1. 1Ajustez les curseurs de décalage horizontal et vertical.
  2. 2Définissez le rayon de flou et l'étalement pour contrôler la forme de l'ombre.
  3. 3Choisissez une couleur d'ombre et une opacité.
  4. 4Basculez l'option inset pour les ombres intérieures.
  5. 5Copiez le code CSS box-shadow généré.
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 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.
Générateur de grille CSS
Construisez des mises en page CSS Grid avec un éditeur visuel. Définissez les colonnes, les lignes, les espacements et l'étendue des cellules.

Questions fréquemment posées

Comment fonctionnent les valeurs de box-shadow ?▾
Box-shadow prend offset-x, offset-y, le rayon de flou, le rayon de diffusion et la couleur. L'offset contrôle la position, le flou contrôle la douceur et la diffusion contrôle la taille. Une diffusion négative rend l'ombre plus petite que l'élément.
Peut-on ajouter plusieurs ombres ?▾
Oui. Cliquez sur « Ajouter une ombre » pour ajouter des couches d'ombre supplémentaires. Les ombres multiples sont courantes dans le design moderne pour créer des effets de profondeur et d'élévation.
À quoi sert l'option inset ?▾
Le mot-clé inset transforme l'ombre extérieure (ombre portée) en ombre intérieure. Cela crée un aspect enfoncé ou en retrait.
Peut-on contrôler l'opacité de l'ombre ?▾
Oui. Chaque couche d'ombre dispose d'un curseur d'opacité (0-100%). L'outil génère des valeurs de couleur rgba() avec l'opacité spécifiée.
Peut-on utiliser cet outil sur téléphone ?▾
Oui, le générateur de box-shadow fonctionne dans tout navigateur mobile moderne. Ajustez les paramètres d'ombre avec les curseurs et copiez le CSS sur n'importe quel appareil.
Le CSS généré fonctionne-t-il avec Tailwind CSS ?▾
Oui. Vous pouvez utiliser la valeur box-shadow générée avec la syntaxe de valeur arbitraire de Tailwind comme shadow-[valeur] ou la définir comme ombre personnalisée dans votre tailwind.config.js.
Combien de couches d'ombre puis-je ajouter ?▾
Vous pouvez ajouter plusieurs couches d'ombre pour créer des effets de profondeur complexes. Chaque couche dispose de contrôles indépendants pour l'offset, le flou, la diffusion, la couleur, l'opacité et l'inset, permettant des designs d'élévation réalistes.