Ángulo y dirección del degradado: hacia dónde debe ir

El ángulo del degradado es la dirección en que cambian los colores de un degradado, y hace más trabajo del que la mayoría espera. Decide de dónde parece venir la luz, dónde empieza y termina el ojo y si el diseño se siente calmado, alegre o inquieto. Como regla general, más claro arriba se siente natural, las diagonales se sienten enérgicas y el extremo claro debe quedar lejos de tus palabras. En CSS, los ángulos empiezan en 0deg apuntando hacia arriba y giran en el sentido de las agujas del reloj.

Cómo cambia la sensación la dirección del degradado

Luz desde arriba

La gente tiende a suponer que la luz viene de arriba, porque casi siempre es así, del sol o de un techo. Un degradado más claro arriba coincide con esa expectativa, así que se lee natural y calmado: cielo sobre tierra, una pared iluminada, un objeto con luz suave. Dale la vuelta para que la luz esté abajo y los mismos colores se sienten teatrales, como una hoguera, un escenario o una pantalla brillando en la oscuridad. Ninguno está mal, pero el segundo debería ser una decisión.

La misma expectativa afecta a botones y tarjetas. Una superficie algo más clara arriba se lee como elevada; una más clara abajo se lee como hundida. Conviene saberlo al añadir un degradado sutil a un botón con degradado.

Diagonales y energía

Las líneas diagonales se sienten como movimiento, porque parecen inestables comparadas con las verticales y las horizontales. Por eso las diagonales, sobre todo de arriba a la izquierda hacia abajo a la derecha, son la opción más común para publicaciones sociales, botones y gráficos de lanzamiento. El inicio arriba a la izquierda coincide además con el punto donde los lectores de idiomas de izquierda a derecha empiezan una página, así que el extremo claro los recibe primero.

Las diagonales más inclinadas y más suaves cambian el ambiente. Alrededor de 100 a 120 grados se siente casi vertical con una ligera inclinación, calmado pero no estático. Alrededor de 150 a 160 grados se siente como una luz tardía rasando una superficie. Un 45 o un 135 exactos son lo más dinámico, y también lo más común, lo que es un motivo para probar algo ligeramente distinto si quieres destacar; mira degradados de dos colores.

Mantén la luz lejos de las palabras

La dirección también es composición. El extremo brillante de un degradado atrae la vista, así que colócalo donde quieras atención y mantén el texto en el extremo más calmado, donde el contraste es más estable. Un titular en lo alto de una publicación encaja con un degradado que se oscurece hacia arriba, con el brillo en la esquina de abajo, o al revés con letra oscura.

Cómo funcionan los ángulos del degradado en CSS

En CSS, el ángulo de un degradado lineal describe la dirección en que viajan los colores. 0deg apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj: 90deg va de izquierda a derecha, 180deg de arriba abajo y 270deg de derecha a izquierda. Si omites el ángulo, el valor por defecto es 180deg. También puedes usar palabras clave como to right y to bottom left.

/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }

La diferencia de la última pareja importa en banners y stories. Un ángulo fijo como 45deg corre siempre a 45 grados, sea cual sea la forma. Una palabra clave de esquina como to top right inclina el ángulo para ajustarse a la caja, de modo que el color del punto medio corre exactamente entre las otras dos esquinas. En un banner ancho de 3:1, to top right equivale a unos 18deg, mucho más cerca de la vertical que 45deg, porque las bandas de color tienen que quedar a lo largo de la diagonal larga. Usa palabras clave cuando quieras que el degradado vaya de esquina a esquina en cualquier forma; usa grados cuando quieras la misma inclinación en todas partes.

Elegir una dirección, paso a paso

1. 1

   Decide de dónde viene la luz

   De arriba para calma y naturalidad, de abajo para brillo y drama, de una esquina para un foco.

2. 2

   Coloca primero las palabras

   Pon el titular donde le corresponde en la composición y haz correr el degradado de modo que su extremo calmado quede detrás.

3. 3

   Elige la inclinación según el ambiente

   Vertical para calma, diagonal para energía, horizontal para progreso.

4. 4

   Revisa cada formato

   Una dirección que funciona en un cuadrado puede poner la luz en el lugar equivocado en una story o un banner. Ajusta por tamaño en lugar de recortar.

Para el resto de la sintaxis del degradado lineal, mira degradados lineales en CSS. Para otras formas que no tienen una sola dirección, mira tipos de degradados. Los Marks de Gradiently se renderizan para cada tamaño en el que diseñas, de modo que su luz cae en un lugar sensato en cada formato en lugar de donde la deje un recorte.