Cómo generar un degradado CSS con dos colores

Qué puedes generar

Este generador sirve para obtener texto CSS de un degradado a partir de dos colores y, si lo necesitas, un ángulo. Es útil cuando quieres preparar rápidamente un fondo lineal o radial para una interfaz, una maqueta o una página web sin redactar la sintaxis desde cero.

Trabaja con dos valores de color. También puedes indicar el tipo de degradado y el ángulo que debe usar la versión lineal. Si dejas los campos de color vacíos, se utilizan #ff6b6b y #4ecdc4; el ángulo predeterminado es de 45 grados y el tipo inicial es lineal.

Cómo usar el generador

1. Introduce el primer color en su campo y, después, el segundo. Puedes usar valores como #2563eb y #f97316. El generador inserta los valores proporcionados en el texto CSS, por lo que conviene revisarlos antes de copiar el resultado.

2. Selecciona el tipo lineal o radial. Para un degradado radial circular, utiliza el valor radial. Cualquier otro valor distinto de linear o radial se procesa con el formato lineal, aunque ese valor siga apareciendo en los datos devueltos.

3. Si has elegido el formato lineal, introduce el ángulo en grados. El valor se convierte en un número entero y se reduce dentro de un ciclo de 360 grados. Por ejemplo, 450 se trata como 90. Si el valor no puede convertirse, se usa 45 grados.

4. Genera el resultado y copia el texto CSS producido. Comprueba que los dos colores, el tipo y el ángulo reflejan lo que querías antes de incorporarlo a tu hoja de estilos.

Cómo interpretar el resultado

El resultado es texto CSS con una forma lineal o radial y los dos colores que has indicado. En el formato lineal, el ángulo aparece expresado en grados junto con ambos colores. En el formato radial, el valor radial produce un degradado circular con esos colores.

Si no introdujiste algún dato, interpreta el resultado teniendo en cuenta los valores predeterminados: #ff6b6b para el primer color, #4ecdc4 para el segundo, 45 grados y tipo lineal. Un ángulo escrito de otra forma puede cambiar al convertirse en entero; además, los valores que no se puedan convertir vuelven al ángulo de 45 grados.

Antes de usar el texto, verifica los colores y el tipo seleccionado. El generador no realiza una validación independiente de los valores de color. Tampoco ofrece un formato diferenciado para tipos arbitrarios: los valores que no sean lineal o radial utilizan la forma lineal.

Ejemplo práctico

Quieres crear un fondo lineal azul y naranja orientado con un ángulo de 120 grados.

Introduce #2563eb como primer color, #f97316 como segundo, selecciona el tipo lineal y escribe 120 como ángulo; después, genera el resultado.

El resultado tiene forma de texto CSS para un degradado lineal con un ángulo de 120 grados y los colores #2563eb y #f97316.

Limitaciones

• Los colores se insertan sin una validación independiente y los tipos distintos de linear o radial utilizan el formato lineal.

Errores frecuentes

• Escribir un tipo distinto de linear o radial puede producir un resultado lineal aunque esperes otro formato. Usa radial cuando necesites el degradado circular y revisa el tipo antes de generar el texto.

Preguntas frecuentes

¿Cómo creo un degradado radial?

Sí, si utilizas el valor radial; ese valor produce un degradado radial circular con los dos colores proporcionados. Otros valores no crean una variante radial y usan el formato lineal.

¿Qué ocurre si dejo vacío o escribo mal el ángulo?

Si no introduces un ángulo, se utiliza 45 grados. Si el valor no se puede convertir, también se aplica ese valor predeterminado; los números válidos se convierten a entero y se reducen mediante módulo 360.

¿El generador comprueba que los colores sean válidos?

Los valores se insertan en el texto CSS sin una validación independiente de colores. Revisa que cada valor tenga el formato de color que necesitas antes de utilizar el resultado.