Generador de degradados CSS

PorOleh Soloninactualizado el 25 de septiembre de 2026

Resultado

background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);

Declaración CSS

background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);

Declaración de reserva

background-color: #7b3ff2;

Cómo se cuenta el ángulo

CSS cuenta el ángulo desde «hacia arriba» y en el sentido de las agujas del reloj; las matemáticas, desde el eje X y en sentido contrario. Por eso 90deg va de izquierda a derecha, y no los 0 grados que daría la cuenta matemática.

Aviso

La línea de reserva va justo encima del degradado: así, el navegador que no lo entienda se queda al menos con el color.

El resultado es orientativo y no sustituye a una asesoría profesional.

Dos colores, un ángulo y la declaración CSS lista, con el color de reserva que se pinta detrás.

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í.

Cómo usar la calculadora

Escriba los dos colores en hexadecimal; el primero va también en la declaración de reserva.
Elija lineal o radial: solo un degradado lineal tiene dirección.
Ajuste el ángulo: 0 va de abajo arriba y 90, de izquierda a derecha.
Copie las dos líneas; por costumbre, la del color plano va antes que la del degradado.

El ángulo no se cuenta como uno espera

CSS cuenta el ángulo de un degradado desde «hacia arriba» y en el sentido de las agujas del reloj. Las matemáticas cuentan desde el eje X y en sentido contrario. Entre las dos hay 90 grados y una simetría, y por eso casi todos los primeros intentos salen girados un cuarto de vuelta.

Hay un valor que sirve de regla: 90deg va hacia la derecha, no hacia arriba. Quien prefiera no calcular, escribe la dirección con palabras: «to right» es lo mismo que 90deg y dentro de medio año se entiende mejor.

Los ángulos los da la calculadora junto con la dirección hacia la que van. La salvedad de los valores oblicuos tiene motivo: «to top right» apunta siempre a la esquina y 45deg apunta siempre a 45 grados, y en una superficie ancha no son lo mismo.
Ángulo	Dirección	Equivale a
0deg	de abajo arriba	to top
45deg	hacia arriba y a la derecha	to top right (solo en una superficie cuadrada)
90deg	de izquierda a derecha	to right
135deg	hacia abajo y a la derecha	to bottom right (solo en una superficie cuadrada)
180deg	de arriba abajo	to bottom
270deg	de derecha a izquierda	to left

Por qué el centro se vuelve gris

Un degradado entre dos colores intensos y opuestos se apaga en el centro. El motivo es el cálculo: los navegadores mezclan por defecto en el espacio sRGB, y allí entre el azul y el amarillo queda un gris sin saturación en lugar de un verde.

Hay dos salidas. La sencilla: poner un tercer color en el centro que marque el camino. La exacta: mezclar en otro espacio de color, algo que CSS permite desde hace poco con «in oklab». Este generador escribe a propósito la forma sencilla, que funciona en todas partes.

La calculadora da las dos líneas: background-color con el color liso y background-image con el degradado. Son propiedades distintas, así que el orden entre ellas no cambia el resultado; el color se pinta siempre detrás.
Línea	Para qué
background-color: #7b3ff2;	reserva: se aplica si la línea siguiente no se entiende
background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);	el degradado en sí

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 del texto frente al color liso y frente a la parte más clara y la más oscura del degradado que quede detrás.

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.

Fuentes

Cifras vigentes en 2026. Los resultados son orientativos y no sustituyen el asesoramiento profesional.

Preguntas frecuentes

¿Por qué el degradado sale girado respecto a lo que había dibujado?

Porque el ángulo de CSS no es el de la trigonometría. Aquí 0deg apunta hacia arriba y los grados giran con las agujas del reloj; en la circunferencia trigonométrica, 0° mira a la derecha y los grados crecen en sentido contrario. Reste el ángulo a 90 y normalice el resultado entre 0 y 360.

¿Puedo poner tres colores o cortar el degradado a la mitad?

Con esta herramienta no: escribe dos paradas y se detiene ahí. La sintaxis sí lo permite, y basta con seguir editando la línea — linear-gradient(90deg, #f43f5e 0%, #fbbf24 40%, #22c55e 100%) reparte tres colores con las posiciones indicadas. Dos paradas con el mismo porcentaje producen un corte seco, sin transición.

¿Sirve para el fondo de un correo electrónico?

Con reservas. Varios clientes descartan los degradados, y el Outlook clásico de Windows renderiza el HTML con el motor de Word, que no los admite. En un correo, la línea de reserva deja de ser una precaución y pasa a ser lo que verá buena parte de los destinatarios.

¿Por qué 90 grados apunta a la derecha y no hacia arriba?

Porque CSS cuenta desde «hacia arriba» en el sentido de las agujas del reloj: 0deg es hacia arriba, 90deg a la derecha y 180deg hacia abajo. La cuenta matemática empieza en el eje X y va en sentido contrario; entre las dos hay un cuarto de vuelta y una simetría.

¿Hace falta todavía la declaración de reserva?

Cuesta una línea y salva el caso de que la línea del degradado no llegue a aplicarse: basta una errata en un color, y sin reserva el texto queda sobre el color de fondo de la página. El trabajo es menor que el de buscar después el fallo.

¿Por qué mi degradado a 45 grados no sale como esperaba?

Porque un ángulo y una esquina son cosas distintas. Con «to top right» el navegador calcula el ángulo según la caja: la línea del color intermedio pasa por las otras dos esquinas, así que el ángulo cambia con el ancho y el alto. 45deg es siempre 45 grados. Solo en un cuadrado coinciden los dos.

¿Puedo usar más de dos colores?

En CSS sí, tantos como se quiera y con su posición. Este generador escribe dos porque ese es el caso en el que el ángulo lo decide todo. Para añadir un tercero, basta con ponerlo antes del paréntesis de cierre.

Enlaces útiles

Desarrollo y web Todas las calculadoras

Generador de degradados CSS

Resultado

También te puede servir

Conversor de colores

Contraste de color según WCAG

Longitud del title y la meta description

Generador de Open Graph

Inspector de caracteres Unicode

Convertir Markdown a HTML

Enlaces útiles