Cómo crear degradados CSS bonitos paso a paso
Los degradados (gradients) pasaron de ser un efecto novedoso a un recurso esencial del diseño web moderno: fondos vibrantes, botones con profundidad, superposiciones sobre imágenes. Bien usados, dan una sensación premium; mal usados, parecen diseño de los 2000.
La diferencia está en la técnica: elección de colores, ángulo, puntos de parada y transiciones suaves. En esta guía aprenderás la sintaxis CSS exacta con ejemplos listos para copiar. Y como un degradado bonito empieza por colores que combinen, verifica la legibilidad del texto que pongas encima con la herramienta gratuita de contraste WCAG de Tótem (usatotem.com/herramientas-diseno/contraste-wcag/): un degradado espectacular no sirve si el texto resulta ilegible.
Sintaxis básica: linear-gradient
El degradado lineal es el más usado: background: linear-gradient(dirección, color1, color2);. La dirección puede ser un ángulo (135deg) o una palabra (to right, to bottom, to top left).
Ejemplo clásico: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);. Crea una transición diagonal de azul a morado, el estilo que popularizaron incontables landing pages.
Los porcentajes son los «puntos de parada» (color stops): indican dónde empieza y termina cada color. Puedes añadir paradas intermedias: linear-gradient(to right, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) suaviza la transición con un punto medio.
Por defecto, la transición entre colores es uniforme. Para un degradado con «franja» nítida (efecto duotono), iguala dos paradas: linear-gradient(to bottom, #1a1a2e 0%, #1a1a2e 50%, #e94560 50%, #e94560 100%) crea dos bloques de color con corte limpio al 50 %.
Recuerda los prefijos solo si debes soportar navegadores muy antiguos: los navegadores modernos aceptan la sintaxis estándar sin prefijos desde hace años.
Paso 1: Elige colores que degraden bien
Paso 1: usa colores con luminosidad similar para transiciones suaves. #667eea → #764ba2 funciona porque ambos son tonos medios saturados; un salto de amarillo pálido a azul marino crea una zona central grisácea y sucia.
Paso 2: prueba combinaciones análogas (vecinas en el círculo cromático: azul → morado → rosa) para degradados armoniosos, o complementarias suavizadas (naranja → rosa) para degradados con energía.
Paso 3: evita el «gris de la muerte»: al mezclar complementarios puros (rojo → verde), el punto medio se vuelve gris. Añade una parada intermedia de un color vivo para mantener la saturación en toda la transición.
Paso 4: para fondos de texto, elige degradados oscuros o con una zona oscura estable donde irá el texto. Un degradado claro con texto blanco es ilegible: compruébalo con el verificador gratuito de contraste WCAG de Tótem antes de publicar.
Paso 5: limita la paleta del degradado a 2-3 colores. Más colores no significan más belleza: los degradados arcoíris rara vez se ven profesionales fuera de contextos infantiles o festivos.
Paso 2: Degradados radiales y cónicos
El degradado radial (radial-gradient) irradia desde un punto: background: radial-gradient(circle at center, #ffecd2 0%, #fcb69f 100%);. Ideal para efectos de luz, focos y fondos con centro iluminado.
Puedes controlar la forma (circle o ellipse), el tamaño (closest-side, farthest-corner) y la posición (at top left, at 30% 70%). radial-gradient(ellipse at top, #ffffff 0%, #a8edea 100%) simula luz cenital sobre una tarjeta.
El degradado cónico (conic-gradient) gira alrededor de un punto: background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #0000ff, #ff0000);. Es la base de los gráficos circulares hechos solo con CSS y de efectos de ruleta.
Un uso elegante del cónico: conic-gradient(from 180deg at 50% 50%, #1a1a2e 0deg, #16213e 180deg, #1a1a2e 360deg) crea una variación sutil de tono perfecta para fondos oscuros premium.
Combina capas: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('foto.jpg'); pone un velo oscuro uniforme sobre una imagen para que el texto blanco sea legible. Es el truco más usado en héroes con fotografía.
Paso 3: Texto con degradado y otros efectos
El texto con degradado se logra con background-clip: .texto-degradado { background: linear-gradient(90deg, #ff6b6b, #feca57); -webkit-background-clip: text; background-clip: text; color: transparent; }. El degradado se recorta con la forma de las letras.
Funciona mejor en titulares grandes y en negrita: en cuerpo de texto pequeño pierde legibilidad y el efecto se desperdicia. Reserva esta técnica para H1 y palabras destacadas.
Ojo con la accesibilidad: el texto con degradado debe mantener contraste suficiente en toda su extensión. Si una zona del degradado es clara, el contraste puede caer por debajo del 4,5:1: verifica el peor caso con el comprobador de contraste.
Bordes con degradado: usa border-image o un wrapper con padding de 2px y fondo degradado detrás del contenido con fondo sólido. Son detalles que elevan tarjetas y botones.
Degradados animados: anima background-position con un background-size mayor al 100 % para un efecto de movimiento sutil en héroes. Mantén la animación lenta (10-15 segundos) y respeta prefers-reduced-motion para usuarios sensibles al movimiento.
Cinco degradados listos para copiar
1. Atardecer suave: linear-gradient(135deg, #fa709a 0%, #fee140 100%). Perfecto para fondos de landing juveniles y optimistas.
2. Océano profundo: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%). Fondo oscuro premium para secciones de tecnología o finanzas, con texto blanco encima.
3. Neón nocturno: linear-gradient(135deg, #667eea 0%, #764ba2 100%). El clásico azul-morado que nunca falla en botones y tarjetas destacadas.
4. Amanecer cálido: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%). Tonos melocotón suaves para fondos de testimonios o newsletters.
5. Velo para fotos: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%). Se coloca sobre imágenes para que el texto inferior sea legible sin tapar la foto.
Copia el que encaje con tu proyecto, ajusta los colores a tu paleta de marca y verifica siempre el contraste del texto superpuesto antes de publicar.
Herramientas gratuitas mencionadas
Preguntas frecuentes
¿Cuál es la sintaxis básica de un degradado en CSS?
background: linear-gradient(dirección, color1, color2);. La dirección puede ser un ángulo (135deg) o palabras clave (to right, to bottom). Añade porcentajes tras cada color para controlar los puntos de parada, por ejemplo linear-gradient(135deg, #667eea 0%, #764ba2 100%).
¿Qué diferencia hay entre linear, radial y conic gradient?
El lineal transiciona en una dirección recta; el radial irradia desde un punto central (ideal para efectos de luz); el cónico gira alrededor de un punto (útil para gráficos circulares y efectos de ruleta). Los tres aceptan múltiples paradas de color.
¿Cómo hago texto con degradado en CSS?
Con background: linear-gradient(...); -webkit-background-clip: text; background-clip: text; color: transparent;. El degradado se recorta con la forma de las letras. Úsalo en titulares grandes y verifica que el contraste se mantenga suficiente en toda la extensión del degradado.
¿Los degradados afectan a la accesibilidad?
Pueden, si el texto va encima: un degradado claro bajo texto blanco (o viceversa) puede dejar el contraste por debajo del 4,5:1 exigido. Comprueba siempre la combinación de peor caso (la zona del degradado con menos contraste) con un verificador de contraste WCAG.
En resumen
Crear degradados bonitos en CSS es una cuestión de técnica, no de talento: colores de luminosidad similar, 2-3 paradas bien colocadas, ángulo con intención y verificación del contraste del texto. Con la sintaxis de esta guía y los cinco ejemplos listos, puedes producir fondos de nivel profesional hoy mismo.
Elige uno de los ejemplos, adáptalo a los colores de tu marca y comprueba la legibilidad con el verificador gratuito de contraste WCAG de Tótem. Un degradado espectacular con texto ilegible es un degradado fallido: la belleza y la accesibilidad van de la mano.