Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.
Las sombras son una de esas opciones y ni la
w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:
box-shadow: 5px 5px 5px #AABBCC;
Pero, pese a que
box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando
la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como
DIV,
P o incluso
IMG y si bien se recomienda que esos bloques estén dimensionados con
width o
height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.
box-shadow: 5px 5px 5px #ABC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
Este es un texto dentro de un DIV
Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.
Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:
<style>
.sombra {
/* propiedades normales */
border-radius: 10px;
background-color: #456;
color: #DEF;
font-size: 24px;
height: 30px;
margin: 20px auto;
padding: 10px;
text-align: center;
width: 400px;
/* propiedades de la sombra */
box-shadow: 5px 5px 5px #ABC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>
<div class="sombra"> Este es un texto dentro de un DIV </div>
De manera similar, prodría aplicarse a un elemento más complejo:

Esta es una imagen dentro de un DIV
La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):
box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;
offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:
box-shadow y box-shadow |
Este es un texto dentro de un DIV | Este es un texto dentro de un DIV | Este es un texto dentro de un DIV |
blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:
blurRadius 1 | blurRadius 10 | blurRadius 50 |
Este es un texto dentro de un DIV | Este es un texto dentro de un DIV | Este es un texto dentro de un DIV |
spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:
spreadRadius 5 | spreadRadius 10 | spreadRadius 20 |
Este es un texto dentro de un DIV | Este es un texto dentro de un DIV | Este es un texto dentro de un DIV |
Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:
box-shadow: -110px 2px 30px 1px #AABBCC inset;
Este es un texto dentro de un DIV
Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:
box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;
Este es un texto dentro de un DIV
La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:
box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
Este es un texto dentro de un DIV
En Internet Explorer lo que se usa es uno de los tantos
filtros disponibles, la propiedad básica es
filter aunque en IE8 se habla de
-ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)";
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);
Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:
color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255
filter: sólo en Internet Explorer |
Este es un texto dentro de un DIV | Este es un texto dentro de un DIV | Este es un texto dentro de un DIV |
Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);

Al colocar el cursor encima, se mostrará una sombra ...
<style>
.sombra {
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
}
.sombra:hover {
box-shadow: 5px 5px 5px #AABBCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>
<div class="sombra"> ............... </div>