Estilos CSS: Fondos, gradientes y sombras

Los fondos y las sombras son las herramientas con las que CSS aporta profundidad, textura y jerarquía visual sin necesidad de imágenes externas. Un gradiente bien construido reemplaza un archivo PNG; una sombra sutil comunica que un botón es interactivo. Dominar estas propiedades te permite crear interfaces ricas con código puro, ligero y escalable.

Esta es la sexta entrega de la serie Estilos CSS. Recorreremos la familia de propiedades background, los gradientes lineales y radiales, los modos de mezcla y las sombras de caja y de texto.

La familia background

background es una propiedad abreviada que agrupa ocho propiedades individuales:

• background-image — una imagen o un gradiente generado.
• background-position — la posición inicial del fondo.
• background-size — el tamaño de renderizado (cover, contain, valores explícitos).
• background-repeat — si la imagen se repite en mosaico.
• background-origin — respecto a qué caja se posiciona (border, padding o content).
• background-clip — hasta qué caja se extiende el fondo.
• background-attachment — si el fondo se desplaza con el contenido o queda fijo.
• background-color — un color sólido que se renderiza detrás de la imagen.

Gradientes lineales

Un gradiente es una transición de colores generada por una función de CSS, sin archivos. linear-gradient() crea una transición a lo largo de una dirección.

.fade { background-image: linear-gradient(to right, #fff, #2a9da9); }

La función acepta una dirección (to right, 90deg, etc.) y una lista de colores. Puedes incluir más de dos colores y fijar su posición con porcentajes:

.fade { background-image: linear-gradient(90deg, #c0392b 0%, #fff 50%, #2a9da9 100%); }

Gradientes lineales repetitivos

repeating-linear-gradient() crea patrones que se repiten, útil para texturas como rayas:

.rayas {
  background-image: repeating-linear-gradient(-45deg,
    #2a9da9, #2a9da9 10px, #16828d 10px, #16828d 20px);
}

Gradientes radiales

radial-gradient() genera una transición circular o elíptica que irradia desde un punto, en lugar de seguir una dirección lineal.

.brillo { background-image: radial-gradient(#fff, #2a9da9); }

Combinar múltiples fondos

Puedes apilar varias capas de fondo separándolas con comas. La primera capa queda al frente. Esto permite, por ejemplo, superponer un gradiente sobre una imagen:

.heroe {
  background-image:
    linear-gradient(to bottom, rgba(42,157,169,0.6), rgba(22,130,141,0.9)),
    url(foto.jpg);
  background-size: cover;
}

Texturas con blend modes

La propiedad background-blend-mode mezcla las capas de fondo entre sí (con modos como multiply, soft-light, overlay), añadiendo textura a una imagen sin editarla en un programa externo:

.textura {
  background-image: url(rayones.png), url(foto.jpg);
  background-blend-mode: soft-light;
}

Sombras: box-shadow y text-shadow

CSS permite añadir sombras tanto a las cajas (box-shadow) como al texto (text-shadow). Ambas reciben los mismos parámetros básicos:

1. Desplazamiento horizontal y vertical (offset-x, offset-y).
2. El radio de difuminado (blur).
3. (opcional) El radio de expansión (spread).
4. El color de la sombra.

.tarjeta { box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.25); }
.titulo  { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); }

Sombras interiores para feedback

La palabra clave inset convierte la sombra en interior, perfecta para simular que un botón está presionado. Combinada con pseudo-clases como :active, crea componentes con feedback táctil:

.boton {
  background-image: linear-gradient(to bottom, #2a9da9, #16828d);
  box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.4);
  color: #fff;
}

.boton:active {
  box-shadow: inset 0 0 0.5em #0d4f56,
              inset 0 0.5em 1em rgba(0,0,0,0.4);
}

Conclusión

Los gradientes y las sombras te permiten construir interfaces con profundidad y textura usando solo CSS, evitando peticiones de red y archivos de imagen. Apilar capas de fondo, mezclarlas con blend modes y aplicar sombras interiores son técnicas que elevan la calidad visual de cualquier componente.