Skip to content

Couleur & Design

Éditeur d'Ombres de Boîte Avancé

Stack multiple shadows with live preview.

Runs in your browser

Layer 1

Layer 2

CSS
.card {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px -8px rgba(0, 0, 0, 0.20);
}

Note de la rédaction

Understanding · Real shadows aren't a single layer.

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

Quick answers.

›How do I create a realistic shadow?

Layering multiple shadows is key. Start with a tight, dark shadow for the base and stack a second, softer shadow with a larger blur and lower opacity for the ambient glow.

›What is the difference between blur and spread?

Blur softens the edges of the shadow using a Gaussian algorithm. Spread increases or decreases the physical size of the shadow source before the blur is applied.

›Does this support inset shadows?

Yes. Each layer can be toggled to `inset`, which places the shadow inside the element's frame to create a sunken or pressed effect.

›Is the CSS compatible with all browsers?

The generated `box-shadow` property is supported by all modern browsers. For very old versions of Safari or Firefox, you may need to add `-webkit-` or `-moz-` prefixes manually.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Couleur & Design