Como crear sombras a una imagen o a un elemento de HTML con CSS

Hoy en día la nueva versión de CSS la cual es la versión CSS3 nos permite crear sombras fácilmente dentro de cualquier imagen o elemento dentro de nuestro marcado de HTML.

Para poder realizar esto solo tienes que usar la propiedad de box-shadow.

Debajo tu puedes ver algunos ejemplos con esta propiedad.

div {
box-shadow: 2px 1px 10px 5px #999;
}

img {
box-shadow: 0 8px 6px -6px #000;
}

Para que puedas ver esto en acción vamos a usar algunas imágenes.

Esta es la imagen original.

Creando Sombras con CSS

Vamos ahora a aplicar el efecto numero #1. La sombra a todo alrededor.

Sombra cubriendo todos los lados

img {
box-shadow: 0 0 4px 0px #000;
}

Este es el resultado.

Creando Sombras con CSS

Vamos a aplicar el efecto numero #2. Sombra cubriendo los lados derecho y abajo.

Sombra cubriendo los lados derecho y abajo

img {
box-shadow: 8px 8px 6px -2px #000;
}

Este es el resultado.

Creando Sombras con CSS

Vamos a aplicar el efecto numero #3. Sombra cubriendo solo el lado de abajo.

Sombra cubriendo solo el lado de abajo

img {
box-shadow: 8px 8px 6px -2px #000;
}

Este es el resultado.

Creando Sombras con CSS

Ver video como crear sombras a una imagen o a un elemento de HTML con puro CSS