Gradientes de CSS Escribir y depurar sin adivinar

Los gradientes de CSS son una de esas características que parecen simples hasta que te quedas mirando un bloque de color marrón donde esperabas un cambio limpio de azul a morado. La sintaxis tiene trampas, el camino de depuración es opaco y la mayoría de los tutoriales se detienen justo antes de que comiencen los problemas.

Este es un referente práctico. Cada concepto tiene código funcional. Abre un generador de gradientes de CSS en otra pestaña — querrás experimentar mientras lees.

Los tres tipos — y cuándo usar cada uno

linear-gradient se usa para cualquier elemento direccional: fondos de hero, rellenos de botones, separadores.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient se extiende desde un punto central — ideal para efectos de foco, brillos y elementos circulares de interfaz.

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient avanza alrededor de un ángulo central — la elección adecuada para gráficos circulares, indicadores de carga y ruedas de colores.

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

Regla general: si el cambio fluye en una dirección, usa lineal. Si se extiende, usa radial. Si gira, usa conico.

Desglose de sintaxis: las partes que confunden a las personas

La fuente más común de confusión es dirección vs. ángulo. to right y 90deg ambos producen un gradiente de izquierda a derecha, pero difieren en cómo manejan elementos no cuadrados. Usa direcciones como palabra clave (to right, to bottom right) cuando quieras que el gradiente se adapte a la forma del elemento. Usa valores en grados cuando necesitas control exacto.

Puntos de color son donde la precisión importa:

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

La segunda versión mantiene un naranja sólido durante 30%, luego pasa a morado. Sin posiciones explícitas, obtienes un mezcla suave y uniforme.

También puedes forzar un borde de color duro — útil para patrones en franjas:

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

Problemas comunes y lo que realmente los causa

Banding — líneas visibles en lugar de un gradiente suave — normalmente aparece con transiciones de baja contraste o de oscuro a oscuro. Añadir un punto intermedio sutil y mover ligeramente los colores a menudo los soluciona:

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

Colores que no se mezclan correctamente — morado que se vuelve marrón entre rojo y azul — es un problema conocido de sRGB. El nivel 4 de CSS Color introdujo in oklab interpolación, que mezcla a través del espacio de color perceptivo:

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

El soporte en navegadores es sólido en 2026. Si necesitas compatibilidad con versiones antiguas, mantén el gradiente estándar como respaldo encima de él.

Gradientes conicos en navegadores WebKit antiguos: añade un fondo sólido como respaldo para usos funcionales — gráficos circulares, indicadores de progreso — ya que los fallos decorativos son aceptables, pero los UI rotos no son:

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

Capas de gradientes

Los fondos de CSS aceptan múltiples valores — los gradientes se superponen como capas, de arriba abajo en el orden de declaración:

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

La capa oscura se sitúa encima, dos brillos se sitúan debajo de ella y un fondo sólido está en la parte inferior. Este patrón es común en secciones de hero que necesitan profundidad sin cargar una imagen.

Una restricción: las capas de gradientes con rgba o puntos transparentes interactúan con lo que está debajo de ellos en la misma background pila, no con el fondo de la página. Planifica el orden de capas adecuadamente.

Las variables de CSS hacen que los gradientes sean personalizables

Los valores de color fijos en los gradientes rompen los sistemas de temas. Define los puntos de color como variables en su lugar:

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

Cambiar de tema se convierte en una sobrescritura de una sola variable. Combínalo con @property para habilitar gradientes animados — sin ello, CSS no puede interpolar entre valores de gradiente:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 495deg; }
}

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

Rendimiento: cuando un gradiente cuesta más que una imagen

Los gradientes se rasterizan en el momento de pintado en la GPU. Para gradientes estáticos y simples, esto es más ligero que una solicitud HTTP de una imagen. Pero gradientes complejos y superpuestos en elementos que se pintan frecuentemente pueden crear puntos de bloqueo en el pintado.

Ten en cuenta estos patrones:

• Más de 3–4 capas de gradientes en un solo elemento
• Gradientes en position: fixed fondos — se repintan en cada marco de desplazamiento
• Gradientes animados sin @property — obligan a repintar completamente en lugar de actualizaciones compuestas

Analiza en DevTools → Rendimiento antes de optimizar. La mayoría de los usos de gradientes están lejos de estos límites. Cuando sí alcanzas un punto de bloqueo, convierte a una imagen pre-renderizada o cambia a @property-basada para animar.

Empieza con el generador, termina en el código

La ruta más rápida para tener un gradiente funcional es visual: usa el Generador de degradado CSS para ajustar tus colores y posiciones, luego copia el resultado en tu hoja de estilos. Desde ahí, las técnicas anteriores — extracción de variables, capas, interpolación — te permiten extenderlo a algo listo para producción sin adivinar. oklab interpolación — te permite extenderlo hasta algo listo para la producción sin adivinar.

También te puede interesar