Un fondo de cabecera se resuelve en una línea: background-image: linear-gradient(135deg, #0f172a, #38bdf8) pinta un azul de noche que se abre hacia un celeste en la esquina inferior derecha. Esta página arma esa línea a partir de los dos colores en hexadecimal, el tipo de degradado y el ángulo, y devuelve además la declaración de color liso que se pinta detrás.
Son dos paradas de color y nada más: sin posiciones intermedias, sin transparencias y sin conic-gradient. El ángulo solo interviene en el degradado lineal — el radial sale como circle, se dibuja desde el centro hacia fuera y el número se ignora; sin esa palabra el navegador dibujaría una elipse ajustada a la caja. Cualquier parada adicional se añade a mano sobre la línea que sale de aquí.
El ángulo empieza arriba y gira con el reloj
En CSS, 0deg apunta hacia arriba: el degradado va del primer color al segundo de abajo arriba. Los grados avanzan en el sentido de las agujas del reloj, de modo que 90deg va de izquierda a derecha, 180deg de arriba abajo y 270deg de derecha a izquierda. El ángulo describe hacia dónde termina el degradado, no de dónde sale.
No coincide con la convención matemática, donde 0° mira a la derecha y los grados crecen en sentido contrario. Quien traiga el número de una fórmula o de un programa de diseño se encuentra el resultado girado y del revés; la equivalencia es ángulo CSS = 90 − ángulo matemático, normalizado después entre 0 y 360. En caso de duda, escriba to right o to bottom left en lugar de grados: el navegador entiende ambas formas.
El color de reserva se pinta detrás
Aquí no salen dos versiones de la misma línea, sino dos propiedades distintas: background-color: #0f172a; y background-image: linear-gradient(135deg, #0f172a, #38bdf8);. No compiten en la cascada, así que el orden entre ellas da igual — el color se queda detrás y el degradado se pinta encima. Un navegador que no entiende el valor del degradado descarta solo esa declaración y conserva la del color, de modo que donde el degradado no llega — clientes de correo, motores de renderizado limitados — queda el color liso en lugar de un bloque en blanco con texto claro encima que nadie puede leer. El truco de escribir dos veces la forma abreviada background: y dejar que gane la última consigue lo mismo por la cascada, pero no es lo que imprime esta herramienta.
La elección de ese color no es decorativa. Si sobre el fondo va texto blanco, la reserva tiene que ser el más oscuro de los dos; si el texto es negro, el más claro. Aquí se propone siempre el color inicial, así que cuando el que aguanta el texto es el final, basta con intercambiar los dos campos. Y compruebe el contraste frente al color liso, no frente al degradado.
El centro turbio entre colores opuestos
Un azul y un amarillo, un naranja y un azul: entre dos colores opuestos del círculo cromático la zona intermedia pierde la saturación y queda de un gris sucio. No es cosa del navegador. La interpolación se hace en sRGB, canal a canal, y a mitad de camino los tres canales se acercan entre sí; cuando llegan a igualarse el centro es gris por definición — #0000ff con #ffff00 dan un rgb(128, 128, 128) exacto. Cuando no se igualan del todo no sale gris, pero sí un tono apagado: un rojo y un verde puros se cruzan en el oliva rgb(128, 128, 0). El aviso de esta página aparece solo en el primer caso, cuando el centro se queda de verdad cerca del gris.
Hay dos salidas. La primera es elegir colores vecinos en el círculo, que es lo que hace que un paso de azul a violeta se vea limpio y uno de azul a naranja no. La segunda es interpolar en otro espacio de color: los navegadores actuales admiten linear-gradient(135deg in oklab, #f59e0b, #2563eb), con in oklab junto al ángulo y antes de la primera coma. Esta herramienta no escribe esa parte; hay que añadirla al resultado.