El uso eficiente de sombras en el diseño web puede brindarle mayor atractivo a una página. Las sombras en CSS permiten agregar profundidad y énfasis a los elementos, guiando la atención del usuario y mejorando la experiencia visual.

Las sombras pueden ser un elemento muy interesante como aliado para el objetivo de una página, pero también puede resultar ser un problema si no las aplicamos de manera correcta, por ejemplo, afectando la legibilidad del texto.

En esta guía, exploraremos cómo aplicar sombras en CSS para cajas, textos e imágenes, detallando ejemplos prácticos y consideraciones de diseño.

¿Qué es una sombra en CSS?

En CSS, las sombras se aplican principalmente usando las propiedades box-shadow para elementos en bloque (como divs y cajas en general) y text-shadow para textos (como pueden ser párrafos y títulos). Estas propiedades permiten definir la posición, color, desenfoque, y expansión de la sombra.

Para manejar las sombras, primero recomiendo conocer en detalle como trabajar con los colores en CSS ya que, como siempre explico en mis clases, será un factor clave para que la sombra se visualice de manera correcta y no dificulte la legibilidad del usuario.

Sombras con box-shadow

La propiedad box-shadow es fundamental para añadir sombras a cualquier elemento que tenga un área definida, como un div, una imagen, o un botón.

Estructura de la sintaxis básica de box-shadow en CSS:

box-shadow: desplazamiento-x desplazamiento-y desenfoque expansion color;

• Desplazamiento-x y desplazamiento-y: determinan la posición de la sombra respecto al elemento.
• Desenfoque (blur): controla el grado de difuminado de la sombra.
• Expansión (spread): ajusta el tamaño de la sombra.
• Color: define el color de la sombra. Se pueden usar todas las variante de colores de CSS. Si empleamos RGBA podremos ajustar la opacidad.

Código CSS de ejemplo de una sombra aplicada a un elemento div:

div {
    width: 200px;
    height: 200px;
    background-color: #f4f4f4;
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.2);
}

Este código aplicará una sombra suave y difuminada a un div, desplazada 10px hacia la derecha y hacia abajo, con un desenfoque de 20px y una expansión de 5px. La sombra tiene un color negro semitransparente.

Sombras internas con box-shadow y la propiedad inset

Además de sombras externas, CSS permite crear sombras internas usando la palabra clave inset.

En el siguiente ejemplo vemos el código CSS de una sombra interna aplicada a un div:

div {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}

En este caso, la sombra parece estar dentro del elemento, dando un efecto de relieve hacia adentro.

Vale remarcar que inset es un valor opcional que solo debemos usar si deseamos sombras internas. De manera predeterminada las sombras son externas y no requieren ninguna especificación adicional al declarar la regla.

Sombras en Texto con text-shadow

Para aplicar sombras a texto, se usa la propiedad text-shadow. Esta es una característica muy interesante para darle vida a los textos y que también puede tener una finalidad para destacar ciertos contenidos. Pero hay que utilizarla con precaución para no afectar a la legibilidad.

En mis clases suelo recomendar no aplicar esta técnica a textos que tengan un tamaño de fuente muy pequeño, ya que puede afectar la legibilidad y la experiencia del usuario.

Ejemplo de la estructura de la sintaxis básica de text-shadow en CSS

text-shadow: desplazamiento-x desplazamiento-y desenfoque color;

El código CSS que sigue a continuación es un ejemplo práctico de uso de esta propiedad:

h1 {
    font-size: 3.5em;
    color: #333;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

El código añade una sombra sutil al texto de un encabezado h1, lo que puede ayudar a destacar el texto en un fondo claro.

Con este tipo de características, siempre recomiendo en mis clases probarlo en el navegador, tanto en dispositivos de escritorio como en móviles, ya que la visualización directa en ambos tipos de dispositivos nos puede ayudar a identificar si logramos la experiencia de usuario buscada.

Sombras en imágenes

Aplicar sombras a imágenes sigue las mismas reglas que las sombras para otros elementos de caja (como vimos anteriormente con el div). Sin embargo, las imágenes con fondos transparentes y bordes redondeados o formas personalizadas pueden requerir atención adicional para evitar sombras no deseadas.

El siguiente código CSS es un ejemplo básico de una sombra aplicada a una imagen:

img {
    width: 300px;
    height: auto;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.4);
}

Sombras en elementos con bordes redondeados

Cuando trabajamos con elementos circulares o con bordes redondeados, como un div convertido en círculo, las sombras pueden añadir un efecto que permite realzar la forma del elemento.

A continuación veremos un código CSS que transforma un div en un círculo y le aplica una sombra exterior:

div {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    border-radius: 50%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

Como mencionaba, este código le otorga al div con forma de círculo y le aplica una sombra suave que acentúa su forma y da una «sensación» de que está más elevado del plano de fondo.

Múltiples sombras

CSS permite aplicar múltiples sombras a un solo elemento, lo que puede ser útil para crear efectos más complejos.

Código CSS con el ejemplo de múltiples sombras aplicadas a un mismo elemento:

div {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.3);
}

Este código añade dos sombras al div: una en la esquina inferior derecha y otra en la esquina superior izquierda.

Consideraciones de Diseño

• Uso moderado: aunque las sombras pueden mejorar el diseño, es crucial no sobrecargarlas. Demasiadas sombras o sombras muy oscuras pueden hacer que un diseño se vea pesado.
• Coherencia de color: es muy importante que el color de la sombra complemente el esquema de colores general del sitio.
• Accesibilidad: las sombras deben mejorar la legibilidad y accesibilidad, no obstaculizarla. Por ejemplo, sombras excesivamente difusas o de bajo contraste pueden ser difíciles de percibir para personas con problemas de visión.

Palabras finales sobre el tema

Las sombras en CSS son una herramienta poderosa para dar profundidad y realismo a los elementos de una página web. Desde sombras externas e internas hasta su aplicación en texto e imágenes, cada aspecto debe ser cuidadosamente considerado para asegurar que mejora la experiencia del usuario sin comprometer la estética del diseño. Siempre debemos tener en mente que, como todo en diseño, la clave está en el equilibrio y la moderación.

Con estas técnicas ya tenemos suficientes elementos para comenzar a experimentar y crear diseños más atractivos, dando vida a nuestras páginas web con simples pero efectivas sombras en CSS.

Si deseamos aprender más sobre sombras en el texto, podremos encontrar más datos en el siguiente documento del W3C: Text Shadows: the text-shadow property.

Para más información sobre sombras en la caja podemos leer el siguiente artículo del W3C: CSS Backgrounds and Borders Module Level 3: Box Shadow Chapter.