Crear una sombra interior en una caja es una tarea muy sencilla con CSS3. Siempre mis alumnos se sorprenden al ver la simplicidad de esta función y lo complejo y tedioso que era hacerlo con imágenes antes. ¿Cómo lo logramos ahora? En primer lugar debemos recordar que la propiedad de CSS3 que nos permite crear sombras para cajas es box-shadow y que por el momento requiere que, además, agreguemos las opciones con los modificadores para -moz y -webkit. Hecha esta aclaración, la manera de aplicar este efecto es agregar el valor inset a los valores de color y desplazamiento de sombra (x, y, blur).

¿Un ejemplo sencillo? Veamos como aplicarlo a un div, cuya clase es sombra:

.sombra{
-webkit-box-shadow:inset 10px 10px 5px #5c5c5c;
-moz-box-shadow:inset 10px 10px 5px #5c5c5c;
box-shadow:inset 10px 10px 5px #5c5c5c;
/* Código by @damiande */
}

El resultado para una caja de 200px x 200px y 1px de borde negro es el siguiente: