La versión corta
- Un degradado radial mezcla el color hacia fuera desde un punto central en círculos o elipses, en lugar de a lo largo de una línea recta.
- Como la vista va a la zona más luminosa, un degradado radial funciona como un foco que indica dónde mirar primero.
- Los degradados radiales más útiles se colocan descentrados, detrás del sujeto o en parte fuera del encuadre, no justo en el medio.
- Una elipse sigue la forma de su contenedor, mientras que un círculo mantiene sus proporciones, algo que importa en formatos altos y anchos.
- Los resplandores radiales oscuros forman bandas con facilidad, así que dales espacio para desvanecerse y añade un poco de grano.
En esta página
Un degradado radial es una mezcla que se extiende hacia fuera desde un único punto, en anillos, en lugar de avanzar en una sola dirección. El centro tiene un color y cada anillo se acerca al siguiente. Como nuestros ojos van primero a la zona más luminosa y saturada de una imagen, un degradado radial actúa como un foco: tú decides dónde cae la atención y colocas ahí tu titular, tu producto o una cara.
Esta guía trata del uso de los degradados radiales en diseño. Para la sintaxis completa, mira radial-gradient() en CSS; para compararlo con los lineales, cónicos y de malla, mira los tipos de degradados.
Qué hace un degradado radial en un diseño
Un degradado lineal sugiere dirección: luz desde arriba, un horizonte, un barrido. Un degradado radial sugiere una fuente. Esa fuente se convierte en el punto focal natural, así que todo lo que pones sobre ella parece intencionado y todo lo que queda en los bordes parece secundario. Es una de las formas más sencillas de construir jerarquía visual sin añadir ni una sola forma.
radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)Círculo o elipse
En CSS un degradado radial es una elipse por defecto, estirada a las proporciones de su caja. En un banner ancho eso significa un resplandor plano y ancho; en una historia vertical se convierte en un óvalo alto. Un círculo mantiene la misma forma a cualquier tamaño, y se parece más a una fuente de luz real.
Usa una elipse cuando quieras que el resplandor llene el formato de manera uniforme, como en una viñeta. Usa un círculo cuando el degradado deba parecer una lámpara, un sol o un halo detrás de un único objeto.
Dónde colocar el centro
Un resplandor justo en el centro de un cuadrado es el degradado radial más común y el menos interesante. Parece una diana. Mover el centro cambia todo el ambiente de la pieza.
- Detrás del sujeto. Pon el resplandor justo detrás de un producto o un retrato para que se despegue del fondo.
- En un tercio. Colocar la fuente cerca de un tercio del ancho o del alto se ve equilibrado sin resultar estático.
- Fuera del encuadre. Un centro debajo o al lado del lienzo da un borde suave de luz, como un amanecer o una lámpara justo fuera de plano.
- Lejos del texto. Si el punto más luminoso queda bajo un texto blanco, el contraste cae justo donde más lo necesitas.
Cuatro trabajos que los degradados radiales hacen bien
Foco y atención
Un centro luminoso sobre un fondo oscuro señala lo que haya encima. Va bien con fotos de producto, carteles de eventos y posts de anuncio donde importa una sola cosa.
Viñeta
Lo contrario: un centro más claro que se oscurece hacia los bordes. Una viñeta sutil lleva la mirada hacia dentro y hace que un fondo plano parezca fotografiado. Mantén el cambio pequeño o parecerá un filtro de cámara antigua.
radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)Brillo y halo
Un círculo pequeño y saturado que se funde con la transparencia se lee como luz que sale de algo: un rótulo de neón, una pantalla, un icono. Superpón dos o tres en distintas posiciones y tendrás medio camino hecho hacia un degradado aurora.
Campos de color
Apila varios degradados radiales con bordes transparentes y se fundirán en un campo suave y orgánico. Así se imitan la mayoría de los degradados de malla en CSS.
.poster {
background:
radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%),
radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%),
radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%),
#0f0a1f;
}Degradados radiales con texto
Un cartel en el que la zona iluminada queda detrás del titular.
Una historia con el texto en la zona oscura y serena.
Decide cuál de dos trabajos tiene el resplandor. O enmarca las palabras, con texto oscuro sobre el centro claro, o enmarca el espacio junto a las palabras, con texto claro sobre el entorno oscuro. Los problemas empiezan cuando el borde del resplandor atraviesa una línea de texto, porque el contraste cambia a mitad de camino. Texto sobre un degradado cuenta más sobre cómo encontrar la zona tranquila.
Problemas habituales con los degradados radiales
Evita
- Un resplandor centrado en cada diseño, como una diana
- Un anillo duro donde dos paradas quedan demasiado juntas
- Un resplandor oscuro que se desvanece en poco espacio y forma bandas
- Una elipse estirada sin querer a lo largo de un banner ancho
Haz
- Coloca la fuente donde estaría el sujeto o la luz
- Separa las paradas para que la caída parezca luz real
- Da a los resplandores oscuros un desvanecido largo y algo de grano
- Elige círculo o elipse a propósito para cada formato
Las bandas son lo que hay que vigilar. Un resplandor del azul marino profundo al negro recorre muy pocos niveles de color en un área grande, así que se escalona. Deja que el desvanecido llegue más lejos y añade grano, como se explica en bandas en degradados.
Preguntas frecuentes
¿Qué es un degradado radial?
Un degradado radial mezcla colores hacia fuera desde un punto central en círculos o elipses, en lugar de a lo largo de una línea recta como un degradado lineal.
¿Qué diferencia hay entre un degradado radial circular y uno elíptico?
Una elipse se estira para ajustarse a las proporciones de su contenedor, mientras que un círculo mantiene la misma forma redonda a cualquier tamaño. En CSS, la opción por defecto es la elipse.
¿Cuándo debo usar un degradado radial en lugar de uno lineal?
Usa un degradado radial cuando quieras un punto focal, un resplandor o una viñeta. Usa un degradado lineal cuando quieras dirección, como la luz que llega desde arriba o un horizonte.
¿Por qué mi degradado radial parece una diana?
Probablemente está centrado y con las paradas muy juntas. Saca el centro del medio o fuera del encuadre, y separa las paradas para que la luz se desvanezca poco a poco.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
