Ombre per il testo

Per aggiungere un'ombra (o più di una) ad un testo dobbiamo usare la proprietà text-shadow con tre valori: le coordinate dell'offset, cioè la distanza dal testo dell'ombra, il blur-radius, cioè l'estensione dell'ombra e il suo colore.

Nel caso dell'applicazione di più ombre la prima indicata si troverà su un livello superiore rispetto all'ultima.

h1 {
	text-shadow: 2px 3px 5px gray;
}

h2 {
	text-shadow: 2px 3px 5px red, 3px 2px 5px blue;
}

Ombre per gli altri elementi

Per aggiungere un'ombra (o più di una) ad un elemento dobbiamo usare la proprietà box-shadow con quattro valori: le coordinate dell'offset, cioè la distanza dall'elemento dell'ombra, il blur-radius, cioè l'estensione dell'ombra, il suo colore e la parola chiave inset per indicare se l'ombra deve essere interna all'elemento. Nel caso dell'applicazione di più ombre la prima indicata si troverà su un livello superiore rispetto all'ultima.

div {
  border: solid 1px black;
  width: 100px;
  height: 100px;
	-webkit-box-shadow: inset 2px 3px 5px red, 3px 2px 5px blue;
	        box-shadow: inset 2px 3px 5px red, 3px 2px 5px blue;
}
<h1>Questo titolo avrà un'ombra grigia</h1>
<h2>Questo titolo avrà due ombre, una rossa e una blu</h2>
<div></div>
h1 {
	text-shadow: 2px 3px 5px gray;
}

h2 {
	text-shadow: 2px 3px 5px red, 3px 2px 5px blue;
}

div {
  border: solid 1px black;
  width: 100px;
  height: 100px;
	-webkit-box-shadow: inset 2px 3px 5px red, 3px 2px 5px blue;
	        box-shadow: inset 2px 3px 5px red, 3px 2px 5px blue;
}
// no js

Simile alla proprietà box-shadow è la proprietà filter con valore drop-shadow, che crea anch'essa un'ombra ma agisce diversamente in base all'elemento su cui viene applicata.

<div>
<svg class="box-shadow" width="200" height="200" viewBox="150 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon fill="orangered" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
</svg>
<svg class="drop-shadow" width="200" height="200" viewBox="150 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon fill="slateblue" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
</svg>
</div>
<div>
  <img class="box-shadow" src="https://www.google.it/images/srpr/logo11w.png" alt="logo Google" width="200">
  <img class="drop-shadow" src="https://www.google.it/images/srpr/logo11w.png" alt="logo Google" width="200">
</div>
div, img {
  margin: 20px;
}
.box-shadow {
  box-shadow: 2px 3px 5px orangered;
}

.drop-shadow {
  filter: drop-shadow(2px 3px 5px darkslateblue);
}
// no js