Accueil > Conception > Générateur d'ombre CSS

Outils recommandés

Sélecteur de CouleurGénérateur de dégradés CSSConvertisseur PX vers PTConvertisseur PX vers REMConvertisseur PX vers EMLampe torche en ligne / veilleuse d'écranTest de pixels morts en ligneAperçu SVG en LigneDécoupe Coins ArrondisCompositeur de calques d'image

Générateur d'ombre CSS

Générez du code box-shadow avec des contrôles visuels, prend en charge ombre interne/externe, opacité et aperçu en direct

px
px
px
px
%
Aperçu de l'ombre
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

Presentation de l'outil : Generateur d'ombre CSS

Le generateur d'ombre CSS permet de creer rapidement des effets d'ombre avec des controles visuels. Il prend en charge les ombres internes et externes, un apercu en temps reel et un code CSS pret a copier.

Qu'est-ce que le generateur d'ombre CSS ?

Il vous aide a regler le decalage, le flou, l'etendue et la couleur sans ecrire le code a la main, puis genere la propriete box-shadow.

Comment utiliser

  1. Ajustez le decalage, le flou et l'etendue.
  2. Choisissez la couleur et l'opacite.
  3. Activez inset pour une ombre interne.
  4. Copiez le code CSS genere.

Cas d'usage courants

  • Donner de la profondeur aux cartes, boutons et panneaux
  • Traduire les specs de design en CSS rapidement
  • Ajuster direction et intensite de l'ombre
  • Creer une elevation subtile en UI

❓ FAQ

Q1 : L'ombre est trop forte ou trop faible.
R : Ajustez d'abord le flou et l'opacite, puis l'etendue.

Q2 : La direction n'est pas bonne.
R : Les valeurs positives vont a droite/bas, les negatives a gauche/haut.

Q3 : Quand utiliser inset ?
R : Pour des effets en creux, comme des champs ou bordures internes.

Fonctionnalites

  • Apercu en direct
  • Controle complet des parametres
  • Bascule ombre interne/externe
  • Copie en un clic

Parametres

  • Offset X / Y : Decalage horizontal et vertical
  • Blur : Douceur de l'ombre
  • Spread : Extension ou contraction
  • Color : Couleur et opacite

Exemples CSS

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

Conseils

  1. Pour les cartes, utilisez plus de flou et peu d'opacite.
  2. En hover, augmentez le flou et reduisez le decalage.
  3. Combinez plusieurs ombres pour plus de profondeur.