Generador de degradados CSS

El ángulo no es el ángulo que esperas

Los ángulos de los degradados CSS empiezan arriba y giran en sentido horario. 0deg apunta hacia arriba, 90deg apunta a la derecha y 180deg apunta hacia abajo. La trigonometría empieza a la derecha y gira en sentido antihorario, así que si traes una fórmula de cualquier otro lado, cuenta con estar noventa grados desfasado y girando al revés.

Las formas con palabras clave parecen atajos para números redondos, y para los lados lo son: to right sí es 90deg. Las palabras clave de las esquinas no. to top right equivale a 45deg solo en una caja cuadrada. En cualquier otra forma el navegador inclina la línea del degradado de modo que una perpendicular a ella trazada por la esquina de inicio pase por las dos esquinas contiguas. El efecto es que un degradado hacia una esquina se mantiene alineado con la diagonal de la propia caja en cualquier relación de aspecto. Si quieres un ángulo que no se mueva cuando la caja cambia de tamaño, escribe los grados.

La línea del degradado también es más larga que la caja que la contiene. Sus puntos de 0% y 100% caen donde la cruzan las perpendiculares trazadas por las esquinas más lejanas, y por eso las esquinas reciben los colores puros de los extremos y no un punto intermedio de la mezcla.

Paradas, bordes duros y ajuste forzado

Si omites las posiciones, el navegador reparte las paradas por igual: dos paradas caen en 0% y 100%, y tres en 0%, 50% y 100%. Si le das posición a algunas pero no a todas, las que se quedaron sin posición se reparten por igual dentro del hueco en el que caen.

Dos paradas en la misma posición producen un borde duro, sin ninguna mezcla. Así se construyen rayas, barras de progreso y tableros de ajedrez sin ningún archivo de imagen. La forma abreviada de doble posición lo escribe de manera compacta: linear-gradient(90deg, #000 0 50%, #FFF 50% 100%) son dos mitades sólidas.

Una parada nunca puede quedar por detrás de la anterior. Si le das una posición menor, el navegador la sube hasta igualar a su predecesora, lo que la convierte en un borde duro en lugar de reordenar nada. Arrastra uno de los controles de arriba más allá de su vecino y lo verás en acción.

Por qué de azul a amarillo se vuelve gris en el medio

Por defecto el navegador interpola entre paradas en sRGB, un canal a la vez. A mitad de camino entre dos colores más o menos complementarios los canales promedian cerca del neutro, así que una mezcla de azul a amarillo pasa por un gris apagado. No es un fallo de renderizado. Es lo que dice la aritmética.

Hay dos soluciones. Agregar una parada intermedia con el tono que sí quieres, que es lo que acaba haciendo la mayoría de los diseñadores. O cambiar el espacio de interpolación: linear-gradient(in oklab, blue, yellow) mantiene estable la luminosidad percibida a lo largo de la mezcla y se salta ese gris sucio. Esa sintaxis de interpolación funciona en los navegadores actuales y no en los viejos. Esta herramienta no la emite: copia el CSS y agrega in oklab después del ángulo si la quieres.

El banding, y el degradado que parece rayado

Ocho bits por canal dan 256 valores. Estira un degradado sutil a lo largo de mil píxeles y habrá muchos más píxeles que colores distintos para llenarlos, así que la transición llega en bandas visibles. Un área grande y una distancia de color pequeña lo empeoran, y por eso una sección hero de gris oscuro a negro es la culpable clásica. Tus opciones son aumentar la distancia entre los colores de las paradas, reducir el área o poner encima una textura de ruido tenue que rompa los bordes. Los navegadores aplican algo de dithering, de forma inconsistente, así que el mismo degradado puede mostrar bandas en una computadora y verse limpio en la siguiente.

Un degradado es una imagen, no un color

Los degradados van en background-image. No puedes poner uno en color, border-color ni en ningún otro sitio que espere un valor de color. El texto con degradado se hace pintando el degradado como fondo y recortándolo luego a las letras con background-clip: text y color: transparent; y si el recorte falla por cualquier motivo, texto transparente significa texto invisible, así que pruébalo antes de publicarlo.

Tampoco puedes hacer una transición entre dos degradados. Las imágenes de fondo no son interpolables, así que un hover que cambia un degradado por otro salta de golpe. Apila los dos como capas separadas y anima la opacidad, o registra una propiedad personalizada con @property para que lo que se anime sea el color de dentro del degradado.

Hasta dónde llega esta herramienta

Escribe una sola capa, en sRGB, sin declaración de fallback. Los fondos de varias capas —un degradado sobre una foto, o varios degradados apilados en un patrón— son una lista separada por comas que esta interfaz no construye. Los degradados repetidos solo se ven en mosaico cuando la última parada queda por debajo del 100%; déjala en 100% y no sobra nada que repetir. Y la vista previa es tu navegador en tu pantalla, así que el banding y el renderizado exacto de los degradados cónicos varían entre motores más de lo que esperarías.

Preguntas frecuentes

¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?

El lineal mezcla a lo largo de una línea recta, con el ángulo que elijas. El radial mezcla hacia afuera desde un punto, en círculo o en elipse. El cónico barre alrededor de un punto central como la aguja de un reloj, que es lo que hace posibles los gráficos circulares y las ruedas de color en CSS puro.

¿Por qué mi degradado tiene rayas visibles?

Eso es banding. Ocho bits por canal dan 256 pasos, y un degradado sutil estirado sobre un área ancha se queda sin colores distintos antes de quedarse sin píxeles. Aumenta la distancia de color, reduce el área o superpone una textura de ruido tenue.

¿Cómo hago un degradado con un borde duro en lugar de una mezcla?

Pon dos paradas en la misma posición. Una parada en 50% seguida del siguiente color también en 50% da una línea limpia, sin transición. Repite el patrón y tienes rayas sin ningún archivo de imagen.

¿Puedo animar un degradado CSS?

No directamente. Las imágenes de fondo no se interpolan, así que pasar de un degradado a otro salta en lugar de mezclarse. Apila dos degradados como capas y anima la opacidad, o registra una propiedad personalizada con @property y anima el color de dentro del degradado.

¿Funciona un degradado como borde o como color de texto?

No como valor de color simple. Para el texto, pinta el degradado como fondo y recórtalo con background-clip: text más color: transparent. Para los bordes, usa border-image con el degradado, o un truco de padding con dos fondos apilados.

Última actualización 19 de septiembre de 2026