Gradientes CSS y Sombras de Caja: Una Guía Visual Completa

Fondo de gradiente colorido en la pantalla de un portátil

Los gradientes CSS y las sombras de caja son dos de las herramientas visuales más potentes y menos aprovechadas en el arsenal de un desarrollador web. Bien utilizadas, añaden profundidad, jerarquía y refinamiento a las interfaces. Mal utilizadas, hacen que todo parezca un sitio web de 2009. Esta guía enseña tanto la mecánica como el buen gusto.

Gradientes CSS

Gradientes lineales

El tipo de gradiente más común. Transita de un color a otro en línea recta.

/* Básico de izquierda a derecha */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Múltiples paradas */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* Con transparencia */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Parada dura (sin mezcla) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

El ángulo puede especificarse en grados (0deg = de abajo hacia arriba, 90deg = de izquierda a derecha) o con palabras clave (to top, to right, to bottom-right).

Gradientes radiales

Se irradian hacia afuera desde un punto central.

/* Gradiente circular */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elíptico (por defecto) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Centro posicionado */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Efecto de foco de luz */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Los gradientes radiales son perfectos para efectos de foco, brillos y viñetas.

Gradientes cónicos

Giran alrededor de un punto central — como una rueda de color o un gráfico circular.

/* Rueda de color */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Segmentos de gráfico circular */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Patrón de tablero de ajedrez */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Texto con gradiente

Uno de los efectos de UI modernos más populares:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Superposiciones de gradiente sobre imágenes

Indispensable para que el texto sea legible sobre fotografías:

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

Usa nuestro CSS Gradient Generator para crear gradientes visualmente con una vista previa en tiempo real y copiar el CSS con un solo clic.

Sombras de caja

La sintaxis de box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

offset-x / offset-y — posición de la sombra (positivo = derecha/abajo)
blur-radius — 0 = borde duro, mayor valor = más suave
spread-radius — positivo agranda la sombra, negativo la reduce
inset — dibuja la sombra dentro del elemento en lugar de fuera

Sombras básicas

/* Elevación sutil */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Sombra de tarjeta */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Sombra de modal grande */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Sombra dura (sin desenfoque) */
box-shadow: 4px 4px 0px #1e293b;

Sombras multicapa

Se pueden apilar múltiples sombras separadas por comas. Esta es la clave para lograr sombras realistas:

/* Elevación Material Design */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* Capas para mayor profundidad */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

El segundo enfoque distribuye la energía de la sombra en múltiples capas, creando una caída de profundidad más natural.

Sombras interiores

Dibujan sombras dentro del elemento — ideales para estados presionados y campos de entrada:

/* Estado de botón presionado */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Campo de entrada con profundidad */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Brillo interior estilo vidrio esmerilado */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Sombras de colores

Las sombras no tienen que ser negras. Las sombras de colores añaden vibración:

/* Elevación con color */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Brillo para modo oscuro */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

Transiciones de sombra suaves

Anima las sombras al pasar el cursor para obtener interacciones satisfactorias:

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

Combinar gradientes y sombras

Las interfaces más pulidas utilizan gradientes y sombras de forma conjunta:

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

Herramientas para trabajar más rápido

CSS Gradient Generator — Crea gradientes visualmente con múltiples paradas, ángulos y tipos. Vista previa en tiempo real con copia en un clic.
CSS Box Shadow Generator — Apila múltiples sombras, ajusta el desenfoque, la expansión y el color, y obtén CSS listo para producción al instante.
Color Format Converter — Convierte entre HEX, RGB, HSL y RGBA — imprescindible al configurar opacidades de sombras.
Color Palette Generator — Genera paletas complementarias, análogas y monocromáticas para encontrar los pares de colores perfectos para tus gradientes.

Los gradientes y las sombras siguen la misma regla que todo buen diseño: la contención. Una sombra o un gradiente bien elaborado eleva un componente. Una docena compitiendo entre sí solo genera ruido visual. Domina las técnicas y úsalas con intención.