Cómo crear degradados CSS

Los gradientes CSS te permiten crear transiciones suaves de colores sin archivos de imagen. Son más ligeros que las imágenes, se escalan perfectamente a cualquier tamaño de pantalla y son fáciles de personalizar. Un gradiente decorativo típico ahorra 20-100 KB en comparación con un JPG o PNG equivalente, y se escala a cualquier resolución sin pérdida de calidad.

Tipos de gradientes CSS

Gradiente lineal: los colores transicionan en línea recta (de arriba a abajo, de izquierda a derecha o en cualquier ángulo).

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

Gradiente radial: los colores se irradian hacia afuera desde un punto central en un patrón circular o elíptico.

background: radial-gradient(circle, #667eea, #764ba2);

Gradiente cónico: los colores rotan alrededor de un punto central, como una rueda de colores.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

Cómo crear gradientes visualmente

1. Selecciona el tipo de gradiente: elige lineal o radial y establece el ángulo o la posición.
2. Agrega paradas de color: haz clic para agregar colores en diferentes posiciones a lo largo del gradiente. Ajusta cada color y su posición.
3. Copia el CSS: copia el código generado y pégalo en tu hoja de estilo.

Usar un generador visual es más rápido que escribir la sintaxis del gradiente a mano, especialmente cuando estás experimentando con múltiples paradas de color.

Una breve historia de los gradientes CSS

Antes de que existieran los gradientes CSS, los diseñadores web tenían que usar imágenes de fondo para cualquier efecto de gradiente: poner en mosaico un GIF de una sola columna horizontalmente, o cortar un PSD de Photoshop en múltiples JPG. Esto funcionaba pero agregaba peso de archivo, solicitudes de red y pixelación al hacer zoom.

WebKit agregó la primera implementación -webkit-gradient() en Safari 4 (junio 2009) con una sintaxis verbosa y difícil de leer. Firefox 3.6 (enero 2010) siguió con -moz-linear-gradient(). El Grupo de Trabajo CSS estandarizó linear-gradient() y radial-gradient() sin prefijo en CSS Image Values Level 3 (2012), momento en el cual los prefijos del navegador comenzaron a desaparecer.

Los gradientes cónicos (conic-gradient()) llegaron mucho más tarde, primero enviados en Chrome 69 (septiembre 2018) y alcanzando todos los navegadores principales con Safari 12.1 (marzo 2019). Permiten patrones visuales que antes eran imposibles sin imágenes: gráficos circulares, ruedas de colores, tableros de ajedrez, patrones de rayo solar.

Los gradientes CSS ahora se consideran características básicas del navegador. Casi cualquier efecto de gradiente que puedas desear es alcanzable en CSS, sin necesidad de imágenes ni JavaScript.

Patrones comunes de gradiente

Fondo de sección hero: un sutil gradiente de dos colores agrega profundidad sin distraer del texto.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Resaltado de botón: un ligero gradiente hace que los botones se sientan tridimensionales.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Superposición en imágenes: una superposición de gradiente mejora la legibilidad del texto sobre las fotos.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Borde de acento: usa un gradiente como borde para interés visual.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Gradiente de malla animado: apila múltiples gradientes radiales y anima las posiciones.

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

Fondo de morfismo de vidrio: combina un gradiente de baja opacidad con un desenfoque backdrop-filter.

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

Posicionamiento de las paradas de color

Por defecto, las paradas de color están distribuidas uniformemente. Puedes anular sus posiciones para controlar dónde aparece cada color:

/* Amarillo en el medio 60%, desvaneciéndose a rojo en los bordes */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

También puedes usar paradas duras para crear rayas o patrones geométricos sin anti-aliasing:

/* Rayas de dos colores sin transición */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

El truco es poner dos paradas de color en la misma posición. El navegador no interpola entre ellas, produciendo un borde nítido.

Cuándo usar gradientes vs colores sólidos vs imágenes

• Color sólido: mejor para fondos de superficie principal (tarjetas, modales, navegación). Predecible y legible.
• Gradiente CSS: mejor para fondos decorativos, secciones hero, estados de hover de botones, efectos de superposición. Bajo peso de archivo, escalable, animable.
• Imagen de fondo (JPG/PNG): mejor para fondos fotográficos o ilustraciones complejas que los gradientes no pueden replicar.
• Gradiente SVG: mejor cuando necesitas un gradiente como parte de un icono o ilustración, especialmente si el gradiente debe escalar con la geometría SVG.

Un patrón común es superponer los tres: una base de color sólido, una superposición de gradiente CSS y una imagen de textura de baja opacidad encima.

Errores comunes

• Bandeo en gradientes suaves: en pantallas de color de 8 bits (monitores más antiguos, algunas pantallas móviles), los gradientes suaves con colores similares pueden mostrar bandas visibles. Agregar una sutil superposición de textura de ruido reduce este artefacto.
• Confusión del ángulo del gradiente: linear-gradient(0deg, ...) comienza en la parte inferior y sube; linear-gradient(90deg, ...) va de izquierda a derecha; linear-gradient(180deg, ...) va de arriba abajo. El ángulo indica la dirección HACIA la que fluye el gradiente, no desde dónde.
• Rendimiento con muchas paradas: un gradiente con más de 20 paradas de color usa más memoria GPU y puede ralentizar el desplazamiento en móviles. Para efectos de gradiente de malla, a menudo 3-5 paradas producen resultados visuales casi idénticos con un rendimiento mucho mejor.
• Contraste del texto sobre gradientes: un encabezado que se lee bien contra la parte más clara del gradiente puede volverse ilegible sobre la parte más oscura. Usa la propiedad text-shadow o un contorno de texto oscuro como red de seguridad.
• Compatibilidad con navegadores más antiguos: si debes admitir IE11 o navegadores móviles muy antiguos, los gradientes cónicos no están disponibles. Los gradientes lineales y radiales funcionan en todos los modernos.
• Dirección del gradiente en idiomas RTL: un gradiente de izquierda a derecha en un diseño árabe o hebreo fluye al revés desde la perspectiva del lector. Prueba en ambas direcciones o usa propiedades lógicas CSS.

Consejos

• Manténlo sutil: los mejores gradientes son apenas perceptibles. Un ligero cambio entre dos colores similares agrega profundidad. Los gradientes arcoíris dramáticos rara vez se ven profesionales.
• Usa gradientes en lugar de imágenes: un gradiente CSS se carga instantáneamente con cero solicitudes de red. Reemplaza imágenes de fondo decorativas con gradientes cuando sea posible.
• Prueba en modo oscuro: los gradientes que se ven geniales en un fondo claro pueden lavarse o chocar en modo oscuro. Considera definir diferentes gradientes para cada tema.
• Ten en cuenta el contraste del texto: si estás colocando texto sobre un gradiente, verifica que el texto sea legible en todo el rango del gradiente, no solo en la parte más clara o más oscura.
• Usa sintaxis consciente del espacio de color: linear-gradient(in oklch, #667eea, #764ba2) produce transiciones perceptuales más suaves que la interpolación sRGB por defecto. Compatible con Chrome 113+, Safari 16.4+, Firefox 113+.
• Inspecciona con DevTools: Chrome y Firefox DevTools muestran un editor visual de gradiente cuando pasas el cursor sobre un valor de gradiente en el panel Styles. La forma más rápida de ajustar gradientes existentes.

Privacidad

El generador de gradiente CSS se ejecuta completamente en tu navegador. Los colores que eliges, las configuraciones de gradiente con las que experimentas y el CSS que generas nunca abandonan tu dispositivo. No hay telemetría, no hay seguimiento de uso, no hay carga de tus elecciones de diseño. Para herramientas usadas durante la exploración de diseño, eso importa: los colores y patrones que pruebas pueden revelar direcciones de marca futuras, temas de producto no anunciados o trabajos de clientes bajo NDA. La generación solo en el navegador mantiene todo eso en tu máquina.