Générateur d’ombres CSS

Créez des ombres CSS et des effets lumineux avec jusqu’à cinq couches. Réglez le décalage, le flou, l’étalement, la couleur et l’opacité de chaque couche, y compris les ombres intérieures. Copiez le CSS ou les classes Tailwind, ou téléchargez un PNG. Partez de l’un des cinq préréglages et adaptez-le à votre création.

100 % local

Préréglages

Choisissez un préréglage pour régler tous les contrôles d’un coup, puis ajustez.

Couleur de fond

Rayon16pxFond sombreUne ombre n’a de sens que sur un fond : testez le couple sur les deux. Une ombre réglée sur blanc disparaît entièrement sur une surface presque noire, et inversement.

Couches

Couche 1

Couleur 1

Décalage X0pxDécalage Y1pxFlou3pxÉtalement0pxOpacité0.18

Couche 2

Couleur 2

Décalage X0pxDécalage Y12pxFlou28pxÉtalement-6pxOpacité0.14

Un préréglage règle tous les curseurs en un clic ; Aléatoire fait de même avec des valeurs aléatoires.

CSS

.box {
  border-radius: 16px;
  box-shadow:
    0px 1px 3px 0px rgb(11 11 18 / 0.18),
    0px 12px 28px -6px rgb(11 11 18 / 0.14);
}

Les ombres superposées créent la profondeur d’une vraie interface : une ombre courte et sombre pour l’arête de contact, une large et douce pour l’élévation ambiante. Une seule grande ombre ressemble à un flou autour de la boîte, pas à de la lumière.

Classes Tailwind

rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]

Valeurs arbitraires : chaque nombre est exact, aucun n’est arrondi à l’échelon d’échelle le plus proche.

Comment fonctionne Générateur d’ombres CSS ?

`box-shadow` combine les décalages horizontal et vertical, le flou, l’étalement, la couleur et l’opacité. L’étalement agrandit ou réduit la zone de l’ombre avant le flou ; une valeur négative aide à la garder près de la boîte.

Chaque couche se règle séparément. En CSS, la première ombre de la liste apparaît devant les suivantes. Vous pouvez associer une petite ombre de contact à une ombre ambiante plus large, ou utiliser des couleurs claires pour créer une lueur.

L’option `inset` dessine l’ombre à l’intérieur de la boîte. L’aperçu SVG reproduit les ombres extérieures et intérieures, y compris l’étalement négatif, et sert aussi à générer le PNG.

Les ombres ne prennent pas de place dans la mise en page, mais un conteneur peut les découper. Les grandes surfaces et les flous étendus demandent davantage de rendu ; testez le résultat sur mobile si vous utilisez de nombreuses couches.

Couches d’ombre

Couche 1 0 1px 3px 0 · #0b0b12 · 18%
Couche 2 0 12px 28px -6px · #0b0b12 · 14%

CSS généré

.box {
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgb(11 11 18 / 0.18),
    0 12px 28px -6px rgb(11 11 18 / 0.14);
}

Quelles options et quels cas limites Générateur d’ombres CSS prend en charge ?

Référence technique et options
Paramètre	Type	Valeur par défaut	Comportement et cas limites
Décalage X / Y	px	0 / 1	Déplace l’ombre horizontalement et verticalement par rapport à la boîte ; les valeurs négatives inversent la direction.
Flou	longueur en px	3	Adoucit les bords de l’ombre ; une valeur plus élevée produit une transition plus large.
Étalement	px	0	Agrandit ou réduit la zone de l’ombre avant le flou ; les valeurs négatives sont acceptées.
Couleur et opacité	rgb avec alpha	sombre à 18%	Définit la couleur et la transparence de cette couche d’ombre.
Ombre intérieure	mot-clé	désactivée	Dessine l’ombre dans la boîte avec `inset` ; elle apparaît aussi dans l’aperçu et dans le PNG.
Couches	1–5, séparées par des virgules	2	Combine plusieurs ombres. La première de la liste est peinte devant les suivantes.
border-radius	px	16	Règle l’arrondi de la boîte et la forme de ses ombres.

Questions fréquentes

Comment créer une ombre douce ?

Commencez par deux couches : une petite pour le contact et une plus large et discrète pour la profondeur. Essayez un étalement négatif sur la seconde pour éviter qu’elle ne déborde trop sur les côtés.

À quoi sert l’étalement ?

Il agrandit ou réduit le contour de l’ombre avant le flou. Les valeurs positives l’étendent et les valeurs négatives la contractent. La taille de l’élément ne change pas.

Comment ajouter une lueur à un bouton ?

Choisissez une couleur claire, un décalage proche de zéro et une opacité adaptée au fond. Associez une petite couche intense à une couche plus large et discrète pour obtenir une transition douce.

`box-shadow` modifie-t-il la mise en page ou les performances ?

L’ombre ne modifie pas l’espace occupé par l’élément, mais un conteneur peut la découper. Les grands flous et les couches multiples augmentent le travail de rendu ; vérifiez la fluidité sur les appareils visés.

Les ombres intérieures sont-elles incluses dans le PNG ?

Oui. L’aperçu SVG et le PNG incluent les couches `inset`, les ombres extérieures et l’étalement négatif. Le CSS exporté conserve les mêmes réglages.

Combien de couches faut-il pour une carte ?

Deux constituent souvent un bon point de départ : le contact et la profondeur ambiante. Ajoutez des couches seulement si elles apportent quelque chose au design et vérifiez le résultat sur le fond réel de la page.

Équipe ToolsByUs · Comment nous vérifions nos outils