Las sombras son uno de los elementos mas recientes agregados en CSS y permiten, como se imaginan, dar efecto de sombras a los elementos. Para eso existe la propiedad box-shadow. Un ejemplo de su sintaxis basica:

box-shadow: diametro de la sombra en alto, diametro de sombra a lo ancho, color.

En código esto se ve así

box-shadow: 30px 20px black;

box-shadow: 30px 20px black;

Cuanto va a medir la sombra sobre el eje y (alto)

Cuanto va a medir la sombra sobre el eje x (ancho)

De que color será la sombra

Un ejemplo practico: tenemos el siguiente HTML

<div class="river">
<p>River Plate</p>
</div>

Y le damos el siguiente CSS

.river{
  height:300px;
  width:500px;
  background:red;
  box-shadow:30px 10px black
}

Notemos que el box-shadow es de 30px para el eje y, 10 para el eje x y se color negro, quedará asi:

Difuminación

Podemos alterar que tan difuminada se verá nuestra sombra. Para esto debemos agregarle un tercer valor a box-shadow. Mientras mas alto sea este valor, mas difuminada se verá nuestra sombra. La propiedad box-shadow quedaría asi

box-shadow: 30px 20px 40px black;

Cuanto va a medir la sombra sobre el eje y (alto)

Cuanto va a medir la sombra sobre el eje x (ancho)

Que tan difuminada va a estar la sombra