Diseñar y crear una interfaz de usuario visualmente atractiva y efectiva es una tarea que requiere de conocimientos específicos. Dentro de esos conocimientos podríamos incluir la necesidad de dominar CSS y sus principales secretos.

Lograr 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.

Para comenzar debemos trabajar con la propiedad de CSS box-shadows. Esta característica soporta varios valores, entre los que encontramos el desplazamiento y el blur. Pero para lograr una sombre interior necesitamos un valor adicional.

¿Cómo logramos entonces la sombra interior? La manera más simple de conseguir este efecto es agregar el valor inset a los valores de color y desplazamiento de sombra (x, y, blur).

Ejemplo de código para una sombra interior con CSS3

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

.sombra{
  	width: 200px;
  	height: 200px;
	box-shadow:inset 10px 10px 5px #5c5c5c;
}

En este ejemplo aplicamos los estilos especificando primero ancho y alto y luego sombra, aunque el orden dentro de esta regla no afecta el resultado final.

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

Podremos leer más sobre como aplicar efectos de sombra en cajas en la documentación que nos brinda el W3C.