Generador de degradados

Con Generador de degradados, diseñadores y desarrolladores de interfaces pueden ajustar una interfaz antes de implementarla. Crea un degradado lineal CSS.

Crea un degradado lineal CSS. Puedes usarla gratis en el navegador sin crear una cuenta y revisar el resultado antes de continuar.

Cómo usar

Introduce primero el ángulo del degradado en grados; decide hacia dónde se desplazan los colores por el elemento.
Añade el color inicial en la línea siguiente y el color final debajo.
Genera el degradado: el área de resultados muestra una línea de CSS que puedes copiar directamente en tu proyecto.
Pega esa línea en la regla que estás trabajando y recarga la página para ver cómo queda realmente.
Cambia el ángulo o un color y vuelve a generar tantas veces como quieras antes de decidirte por un estilo final.

Ejemplo

La muestra usa un ángulo de 45 grados con un azul muy oscuro al inicio y un verde intenso al final. Una vez generado, compara la línea que obtienes con lo que tenías en mente: el ángulo fija la dirección mientras que el orden de los colores decide el tono en cada extremo.

Entrada

45
#0F172A
#16A34A

Resultado

background: linear-gradient(45deg, #0F172A, #16A34A);

Límites y formatos

Solo se generan degradados lineales; las variantes radiales, cónicas y repetidas necesitan otra sintaxis.
Dos colores dan una mezcla sencilla, pero las paradas intermedias no se pueden ajustar desde esta página.
El resultado depende de la pantalla y el navegador del visitante, y una mezcla muy contrastada puede cansar la vista cuando hay texto encima.
Comprueba el contraste si colocas texto sobre el degradado, porque la legibilidad no se puede juzgar solo por el código.

Dónde se procesa

El degradado se genera en tu navegador. El ángulo y ambos colores permanecen en tu dispositivo, no se transmite nada y no se guarda nada al salir de la página, así que el fragmento que copias se construye enteramente en tu propia máquina.

Preguntas frecuentes

¿Puedo reutilizar el código generado en otra regla?

Sí. La línea sigue la sintaxis estándar de un degradado lineal y encaja en cualquier declaración de fondo. Cópiala tal cual y cambia solo los colores si tu paleta evoluciona más adelante.

¿Cómo consigo un degradado que vaya de arriba abajo?

Ajusta el ángulo en pequeños pasos y quédate con el valor que ponga tu primer color en la parte superior del elemento. Como el resultado se comprueba recargando la página, normalmente bastan uno o dos intentos para dar con la dirección que quieres.

¿Puedo usar más de dos colores?

Esta página parte de un color inicial y un color final, así que una mezcla de tres tonos no se puede configurar aquí directamente. Aun así, puedes generar un primer par y luego añadir las paradas adicionales a mano en tu propia hoja de estilos.