¿Cómo añadir sombras con box shadow en CSS?

Una de las cosas que cambiaron para mí cuando me empecé a formar como desarrollador web fue mi capacidad de estar atento a los pequeños detalles. Si te apasiona el tema tanto como a mí, sabes de lo que te estoy hablando. Recuerdo que, cuando todavía estaba empezando en este mundo, noté que había sitios web donde los elementos interactivos parecían sobresalir de la pantalla muy sutilmente, como si me estuvieran invitando a hacer clic en esos botones. Desde entonces, me preguntaba cómo podría lograr este efecto, hasta que supe que la respuesta está en la propiedad box shadow en CSS.

Hoy quiero contarte cómo funciona box shadow, para qué sirve y cómo puedes usarla para darle vida a tus proyectos.

¿Qué es box shadow en CSS?

Box shadow es la propiedad de CSS que debes utilizar cuando quieres añadir sombras a los elementos HTML para crear un efecto visual que simula profundidad. De esta manera, es como si proyectaras una luz sobre el elemento y vieras cómo se refleja su sombra. Esto hace que sea la propiedad ideal para destacar elementos importantes con los que quieres que los usuarios interactúen, aunque también puedes utilizarlo para darle un toque más profesional a tus diseños.

Básicamente, con box shadow, puedes lograr efectos sutiles y elegantes, como también puedes añadir sombras más dramáticas para que tus elementos parezcan saltar del fondo. ¿No es increíble cómo una simple sombra puede cambiar la percepción de un diseño?

¿Para qué sirve box shadow en CSS?

Aunque puedas pensar que las sombras son únicamente un decorado, lo cierto es que también guían la mirada de los usuarios a los elementos importantes y aportan estructura a tus diseños. Así que veamos con un poco más de detalle sus principales usos:

1. Destacar contenido relevante: Cuando añades una sombra a un botón o a una tarjeta, estás resaltando el elemento y llamando la atención del usuario para que sepa dónde debe hacer clic.
2. Crear jerarquías visuales: Las sombras ayudan a establecer niveles en el diseño, de manera que puedes diferenciar los elementos en primer plano de los que están en el fondo.
3. Añadir realismo: Al simular luz y sombras, puedes crear una sensación de profundidad que hace que tus diseños se vean más profesionales, en comparación con un diseño completamente plano.
4. Mejorar la usabilidad: Las sombras interactivas, como las que cambian al pasar el cursor, mejoran la experiencia del usuario al añadir dinamismo e indicar con cuáles elementos se puede interactuar.

Sintaxis de box shadow

La sintaxis de box shadow puede parecer compleja al principio, pero en realidad es bastante intuitiva. Primero, quiero presentarte la estructura básica:

box-shadow: desplazamiento-x desplazamiento-y desenfoque propagación color;

Aquí, puedes encontrar diferentes parámetros. Veamos para qué sirve cada uno:

• Desplazamiento-x: Mueve la sombra horizontalmente. Aquí, los valores positivos la mueven hacia la derecha y los valores negativos, hacia la izquierda, como si estuvieras en un plano cartesiano.
• Desplazamiento-y: Mueve la sombra verticalmente. Para moverla hacia abajo, debes usar valores positivos, mientras, los valores negativos la mueven hacia arriba.
• Desenfoque (blur-radius): Determina qué tan suave o definida es la sombra. Entre más grande el valor, más difuso es el borde.
• Propagación (spread-radius): Ajusta el tamaño de la sombra. Los valores positivos la expanden y los negativos la reducen.
• Color: Especifica el color de la sombra. Puedes usar valores hexadecimales, RGB, HSL o incluso rgba para crear sombras semitransparentes.

Veamos un ejemplo básico:

div {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

En este caso, la sombra está desplazada 4px a la derecha y hacia abajo, con un desenfoque de 8px y una transparencia del 20%.

Ejemplos avanzados de box shadow en CSS

Ahora, quiero mostrarte algunos ejemplos de lo que puedes hacer con esta propiedad:

Sombras internas con inset

¿Has visto esos campos de texto que parecen hundidos? Eso se logra con la palabra clave inset:

input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Con este efecto, la sombra aparece dentro del elemento, simulando un relieve hacia adentro.

Sombras múltiples

Puedes combinar varias sombras separándolas por comas:

card {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.5);
}

Esto crea un efecto tridimensional, como si la luz viniera de varias direcciones.

Sombras dinámicas con transiciones

Añadir una transición a las sombras mejora la interacción:

button {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

button:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

Con este código, el botón parece elevarse al pasar el cursor, haciendo la interacción más atractiva.

Consejos para usar box shadow en CSS

Como siempre, quiero darte algunos consejos que a mí me han funcionado para que puedas aprovechar al máximo todo lo que esta propiedad puede ofrecerte:

1. Mantén la moderación: No exageres añadiendo sombras, ya que utilizar demasiadas puede hacer que tu diseño se vea desordenado.
2. Usa colores suaves: Lo mejor es que optes por sombras sutiles con bordes difusos, pues son más agradables visualmente.
3. Simula luz natural: Piensa en cómo la luz afecta los objetos en el mundo real.
4. Combina efectos: Puedes integrar las sombras con transiciones y colores armónicos para lograr un diseño más profesional.

Luego de todo lo que te he contado, sabes que la propiedad box shadow en CSS es mucho más que un simple efecto visual. Es una herramienta que, bien utilizada, puede convertir un diseño sencillo en una experiencia visual inolvidable. 

¿Te imaginas todo lo que podrías lograr dominando estas y otras técnicas de CSS? En nuestro Bootcamp de Desarrollo Web, te enseñaré a dominar HTML, CSS, JavaScript, React y las tecnologías más demandadas del sector IT en la actualidad. Anímate a empezar una nueva carrera en un sector lleno de oportunidades laborales, con estabilidad laboral y salarios inigualables. 

¡Que la tecnología transforme tu vida!