≡En resumen
- Un degradado es un paso suave entre colores, sin líneas duras entre ellos.
- Degradado y degradé son correctos; degradé es un galicismo que la RAE recoge. «Degradao» y «desgradado» no son formas cultas.
- Los tipos básicos son lineal, radial y cónico; los programas de diseño añaden degradados de malla o de forma libre.
- En web se crean con CSS, sin imágenes, lo que ahorra peso y mejora la velocidad.
- Degradado también es un corte de pelo (fade) y el participio de degradar: una tierra degradada es una tierra deteriorada.
01 ¿Qué es un degradado de color?
Un degradado es un efecto visual en el que un color se funde poco a poco con otro, o se aclara u oscurece hasta desaparecer, sin que se aprecie dónde termina uno y empieza el siguiente. Cada punto intermedio es una mezcla calculada de los colores de partida.
Los degradados existen desde mucho antes que el ordenador: los pintores del Renacimiento ya difuminaban cielos y fondos para simular profundidad. Hoy son una herramienta básica de cualquier programa de diseño y de las hojas de estilo de la web.
Paradas de color
Los colores que defines y la posición donde aparece cada uno (color stops). Entre parada y parada, el programa calcula la mezcla.
Dirección o forma
Si el color avanza en línea recta, en círculos desde un centro o girando alrededor de un punto.
Suavidad
Cuánto dura la transición. Con paradas muy juntas el cambio es brusco; separadas, el paso es suave.
02 ¿Degradado o degradé? Cómo se escribe bien
Las dos formas son válidas. Degradé viene del francés dégradé y la RAE lo recoge como adjetivo «dicho del color o del tamaño: que va en gradación decreciente», que también se usa como sustantivo. Degradado es la forma española, participio del verbo degradar, que en pintura significa disminuir el tamaño y la viveza del color de las figuras según la distancia a la que se suponen colocadas.
| Forma | ¿Es correcta? | Comentario |
|---|---|---|
| Degradado / degradados | Sí | Forma española, la más recomendable en textos cuidados |
| Degradé | Sí | Galicismo asentado y recogido por la RAE; muy usado en moda y peluquería |
| Gradiente | Sí, en diseño digital | Calco del inglés gradient; habitual en software y en CSS |
| Degradada | Sí, con otro sentido | Femenino de degradado: «una zona degradada» es una zona deteriorada |
| Degradao | No en la escritura | Reproduce la pronunciación coloquial que pierde la d de -ado |
| Desgradado | No | Error por cruce con prefijos como des- |
03 Tipos de degradados
Casi todos los programas y lenguajes comparten los mismos tipos básicos. Cambia el nombre, pero la lógica es igual en Figma, Canva, Photoshop, Illustrator o CSS.
| Tipo | Cómo avanza el color | Uso típico |
|---|---|---|
| Lineal (axial) | En línea recta, en el ángulo que elijas | Fondos, botones, cabeceras web |
| Radial | En círculos o elipses desde un centro | Focos de luz, viñetas, volumen en objetos |
| Cónico o angular | Girando alrededor de un punto, como una ruleta | Gráficos circulares, ruedas de color, efectos metálicos |
| Diamante | En forma de rombo desde el centro | Brillos y destellos (Figma, Photoshop) |
| De malla o forma libre | Desde varios puntos colocados libremente | Ilustración realista y fondos orgánicos |
| De transparencia | De un color a totalmente transparente | Oscurecer fotos para que el texto se lea |
Bicolor
Dos colores, normalmente vecinos en el círculo cromático. Es el más limpio y fácil de combinar con una marca.
Multicolor
Tres o más paradas. Da mucha energía visual, como el icono de Instagram, pero exige cuidar el contraste.
Monocromático
Un solo tono que pasa de claro a oscuro. Sobrio y elegante, ideal para interfaces.
04 Cómo hacer un degradado en CSS, Photoshop e Illustrator
En una web, el degradado se escribe en CSS y el navegador lo dibuja: no pesa como una imagen y se adapta a cualquier tamaño de pantalla. Tres ejemplos básicos:
background: linear-gradient(to right, #1e3a8a, #38bdf8);degradado lineal de izquierda a derecha.background: radial-gradient(circle, #fde68a, #f97316);degradado radial desde el centro.background: conic-gradient(from 45deg, red, orange, yellow, green);degradado cónico.
Existen también las versiones repeating-linear-gradient() y repeating-radial-gradient() para crear rayas y patrones.
-
1
Photoshop
Selecciona la herramienta Degradado (tecla G), elige el tipo en la barra de opciones (lineal, radial, angular, reflejado o de diamante) y arrastra sobre el lienzo. En Photoshop los degradados se editan con el editor de degradados.
-
2
Illustrator
Abre el panel Degradado y elige lineal, radial o de forma libre, que permite colocar puntos de color en cualquier lugar del objeto. Ideal para ilustraciones vectoriales.
-
3
Figma
En el relleno de un objeto cambia Solid por Linear, Radial, Angular o Diamond y añade paradas de color en la barra.
-
4
Canva
Usa los elementos de degradado de la biblioteca o el relleno degradado de las formas y ajusta los colores de tu marca.
05 Degradados en branding y diseño web
Tras años de flat design con colores planos, los degradados volvieron con fuerza a mediados de la década de 2010. El caso más citado es Instagram: el 11 de mayo de 2016 cambió su icono de cámara retro por un glifo simple sobre un degradado de amarillo, naranja, rosa y morado. La reacción inicial fue muy negativa, pero hoy es uno de los iconos más reconocibles del mundo.
Desde entonces, marcas tecnológicas y de consumo usan degradados para transmitir energía, modernidad y movimiento. Si estás renovando tu identidad visual, un estudio de diseño gráfico te ayudará a decidir si el degradado encaja con tu marca y a definir sus colores exactos.
Una startup define un degradado del azul #2563EB al violeta #7C3AED. Lo usa en el fondo de la cabecera de la web, en el botón principal y en las portadas de sus redes, pero su logotipo tiene también una versión en un solo color para sellos, facturas y bordados. Así el degradado refuerza la marca sin depender de él.
- ✓Usa colores cercanos en el círculo cromático para evitar tonos grises o sucios en el centro.
- ✓Comprueba el contraste del texto: las pautas WCAG piden al menos 4,5:1 para texto normal en todo el recorrido del degradado.
- ✓Prepara siempre una versión plana del logotipo; en el diseño de logotipos el degradado no puede ser imprescindible.
- ✓En web, prefiere degradados en CSS a imágenes de fondo: pesan menos y no se pixelan.
- ✓No abuses: un degradado protagonista por pantalla suele ser suficiente.
06 Degradado en el pelo y en la moda
Muchas búsquedas de «degradados» se refieren a peluquería. En el corte de pelo masculino, un degradado (en inglés fade) es un corte en el que el cabello se va acortando progresivamente desde arriba hasta la nuca y los laterales, a veces hasta la piel. En coloración, el degradé u ombré es un tinte que pasa de una raíz más oscura a unas puntas más claras.
| Tipo | Dónde empieza la transición | Efecto |
|---|---|---|
| Low fade (degradado bajo) | Justo por encima de la oreja y la nuca | Discreto y clásico |
| Mid fade (degradado medio) | A media altura de la cabeza | Equilibrado, el más pedido |
| High fade (degradado alto) | Cerca de la parte superior de la cabeza | Muy marcado y moderno |
| Skin fade o degradado a cero | Termina con la piel rapada | Contraste máximo |
| Taper | Solo en patillas y nuca | Natural, apenas se nota |
07 Errores comunes al usar degradados
Centros grisáceos
Mezclar colores complementarios (rojo y verde, azul y naranja) en RGB produce un tramo central apagado. Añade una parada intermedia o interpola en un espacio de color moderno.
Texto ilegible
El texto que se lee bien sobre el color claro desaparece sobre el oscuro. Mide el contraste en el peor punto.
Logos que no funcionan en un color
Un logotipo que solo existe en degradado falla en sellos, bordados o impresiones baratas.
Imágenes pesadas
Exportar un fondo degradado como JPG o PNG grande ralentiza la carga; en diseño web profesional se resuelve con una línea de CSS.
Si quieres aplicar degradados en una web nueva o en un rediseño, nuestro equipo de diseño web profesional los integra en la guía de estilos para que sean coherentes, accesibles y ligeros. Para ilustraciones vectoriales complejas, Adobe Illustrator sigue siendo la herramienta de referencia, y si lo que necesitas es una marca nueva, empieza por el diseño de logotipos.
Preguntas frecuentes sobre Degradado
Es una transición suave y progresiva entre dos o más colores, o entre un color y la transparencia, sin cortes visibles. Se usa en diseño gráfico, webs, logotipos y fotografía.
Las dos formas son correctas. Degradé es un galicismo que la RAE recoge; degradado es la forma española. En diseño digital también se usa gradiente.
Los principales son el lineal, el radial y el cónico o angular. Algunos programas añaden el de diamante, el de malla o el de forma libre, además de los degradados a transparente.
Con la propiedad background y funciones como linear-gradient(), radial-gradient() o conic-gradient(). Por ejemplo: background: linear-gradient(to right, #1e3a8a, #38bdf8);
Es un corte en el que el cabello se va acortando poco a poco hacia la nuca y los laterales, también llamado fade. Puede ser bajo, medio, alto o a cero.
Es el femenino de degradado. Además del sentido de color, significa deteriorada o rebajada: una tierra degradada ha perdido fertilidad y una persona degradada ha sido rebajada de grado o humillada.
Porque no hay suficientes tonos intermedios para cubrir la distancia. Trabaja en 16 bits, añade un poco de ruido o evita comprimir mucho la imagen al exportarla.
Fuentes consultadas
Sobre el autor
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.
Ver perfil y artículos →