Un degradado CSS son dos o más colores y una dirección, y el navegador rellena todo lo que hay en medio. El relleno es la parte interesante, porque la forma por defecto en que los navegadores interpolan el color es la razón de que tantos degradados se vean más turbios que los colores que metiste.
Los ángulos de CSS no son los ángulos de las matemáticas
Esto hace tropezar a cualquiera que haya hecho algo de trigonometría. En matemáticas, 0 grados apunta a la derecha y los ángulos crecen en sentido antihorario. En los degradados CSS, 0deg apunta hacia arriba y los ángulos crecen en sentido horario. Las dos convenciones están giradas 90 grados entre sí y giran en sentidos opuestos.
Así que 90deg es hacia la derecha, 180deg hacia abajo, 270deg hacia la izquierda. Si un degradado sale girado respecto a lo que esperabas, casi siempre es por esto, y el remedio no es trastear con el número hasta que quede bien, es saber que CSS empieza arriba y gira como un reloj.
La sintaxis con palabras clave existe para esquivar todo el asunto: to right, to bottom left. Se lee mejor que un número y no puede confundirse con nada, lo que la convierte en la mejor opción siempre que la dirección sea una de las ocho obvias.
El centro turbio, y de dónde viene
Pon un azul saturado y un amarillo saturado en un degradado y mira qué pasa en el medio: se vuelve gris. No un agradable color de transición, sino una banda muerta y lavada que ninguno de los dos colores habría hecho prever.
La causa es la misma que hace que #808080 no sea la mitad de brillante que el blanco. Por defecto los navegadores interpolan los degradados en sRGB, y los números sRGB no son cantidades de luz: están codificados perceptualmente. Promediarlos es aritmética en la escala equivocada, y aterriza en algún sitio más oscuro y menos saturado de lo que el ojo espera. El punto medio de dos colores vivos sale drenado.
CSS ya te deja decir dónde interpolar. Escribir linear-gradient(in oklch, blue, yellow) le dice al navegador que mezcle en un espacio perceptual, y la banda turbia sencillamente no aparece: la transición se mantiene viva de punta a punta. Lo soportan todos los navegadores actuales y es el único cambio que más mejora un degradado hecho de colores saturados. Esta herramienta genera la sintaxis estándar; añadir "in oklch" tras el ángulo es una edición manual que merece la pena.
El bandeado es aritmética, no un fallo de renderizado
Los degradados sutiles hacen bandas. Un lavado suave sobre una sección hero muestra franjas visibles, y ningún ajuste de los colores lo arregla. La razón es que ocho bits por canal te dan 256 valores, y un degradado solo puede usar los valores que existen entre sus extremos.
Mídelo y es contundente. Un degradado de #404040 a #484848 tiene ocho niveles de diferencia con los que trabajar, y estirarlo sobre mil píxeles produce nueve tonos distintos: nueve escalones, cada uno de más de cien píxeles de ancho. Esas son las bandas. No hay precisión perdida que recuperar; los colores están simplemente así de cerca.
Los remedios son todos rodeos. Superpón una textura de ruido tenue, que rompe las regiones planas en tramado y esconde el límite. Usa una diferencia de color mayor en la misma distancia. O acéptalo, ya que el bandeado es mucho menos visible en una página cargada que en una vacía. Lo que no funciona es pedirle al navegador que se esfuerce más, porque ya está en el límite de lo que el formato puede expresar.
La trampa de la transparencia
Desvanecer un color hasta la nada se escribe como un degradado de ese color a transparent, y en Safari se volvía gris en el medio, porque transparent se interpretaba como rgba(0,0,0,0), un negro completamente transparente, y mezclar hacia él arrastraba todo por un negro invisible durante el camino.
Los navegadores modernos interpolan en alfa premultiplicado, lo que lo arregla. Pero el hábito que conviene mantener es escribir el extremo explícitamente: rgba(255,0,0,1) a rgba(255,0,0,0) dice lo que quieres decir, no puede malinterpretarlo nadie, y no depende de que el navegador haga lo correcto con una palabra clave.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": la vista previa es tu propio navegador renderizando el CSS, y la regla se monta con tus entradas en la página. No se transmite nada.
¿Por qué el centro de mi degradado se ve gris?
Interpolación en sRGB, descrita arriba. Los dos colores se promedian en una escala codificada perceptualmente en vez de lineal, lo que hace aterrizar el punto medio más oscuro y plano de lo esperado. Añade "in oklch" tras el ángulo y desaparece: el navegador mezcla entonces en un espacio diseñado exactamente para esto.
¿Cómo quito las franjas de un degradado sutil?
No puedes, no directamente: vienen de tener solo 256 niveles por canal, y un degradado sutil usa muy pocos. La respuesta práctica es una superposición de ruido tenue, que tramba los límites hasta hacerlos invisibles. Es el mismo truco que la imprenta lleva usando un siglo, y es la razón de que tantos degradados "suaves" en sitios bien hechos lleven encima un grano apenas perceptible.
¿Lineal o radial?
Lineal para todo lo que se lea como una superficie: un fondo, un botón, una sección. Radial para todo lo que se lea como una fuente de luz o un punto focal, porque es a lo que un degradado radial se parece físicamente. Si dudas, es lineal: los degradados radiales llaman la atención hacia su centro, y si en el centro no hay nada que merezca atención, el degradado está haciendo una pregunta que el diseño no responde.
¿Los degradados perjudican el rendimiento?
No de forma apreciable. Un degradado CSS se pinta una vez y cuesta menos que la imagen que habrías cargado si no: son bytes que no descargaste. Donde sí cuesta es en la animación: animar las paradas de un degradado fuerza un repintado en cada fotograma, lo que es caro. Si necesitas un degradado en movimiento, anima en su lugar la transform de un elemento de degradado sobredimensionado, y deja que el trabajo lo haga el compositor.