Generador de degradado lineal en línea
Crea imágenes PNG con degradado lineal personalizado: elige colores, tamaño, dirección, escala y transparencia. Procesamiento local, sin subir archivos. El p…
Empezar a usar
Qué hace esta herramienta
Esta herramienta crea una imagen PNG con un degradado lineal entre dos colores. El degradado comienza en la esquina superior izquierda (0,0) y avanza según el ángulo y la escala. Por ejemplo, con el tamaño por defecto 1200×630, ángulo 135° y escala 100%, el punto final del vector está aproximadamente en (-848.53, 445.48). Con ángulo 0°, el degradado va de (0,0) a (1200,0).
Controles reales
- Selector de color inicial y final
- Ancho y alto del lienzo (1–10000 px, máx. 24 Mpx)
- Ángulo (-360 a 360 grados)
- Escala (1–500%)
- Opción de transparencia con porcentaje independiente para cada color
Ejemplo práctico
Quieres una imagen para una cabecera de blog. Deja el tamaño 1200×630, elige azul (#3B82F6) y rosa (#EC4899), ángulo 135° y escala 100%. Al generar, obtienes un degradado diagonal que va del azul en la esquina superior izquierda al rosa en la inferior derecha. Si activas transparencia al 25% en el color final, ese extremo tendrá un 75% de opacidad.
Limitaciones
La herramienta crea exactamente dos paradas de color (en 0 y 1). No hay modo de repetición, selector de espacio de color, difuminado, texturas ni carga de imágenes. Si el tamaño supera el presupuesto de píxeles, se reduce proporcionalmente. Ten en cuenta el contraste del texto y la relación de aspecto deseada.
Preguntas frecuentes
¿Cómo afecta la escala al degradado?
La escala modifica la longitud del vector del degradado. Por ejemplo, al 200% la longitud se reduce a la mitad, por lo que la transición llega antes al segundo color y el resto de la imagen se rellena con ese color final (no se repite).
¿Qué significa el ángulo 0?
Con ángulo 0°, el degradado va horizontalmente de izquierda a derecha, desde (0,0) hasta (ancho, 0). Los ángulos positivos giran en el sentido de las agujas del reloj porque la coordenada y apunta hacia abajo.
¿Puedo usar transparencia en ambos colores?
Sí. Al activar la transparencia, cada color tiene su propio porcentaje. 0% significa opaco y 100% totalmente transparente. Por ejemplo, 25% produce un alfa de 0.75.
Lista de verificación
- Elige colores con buen contraste si vas a superponer texto.
- Verifica que el tamaño no exceda 24 millones de píxeles.
- Ajusta el ángulo para la dirección deseada (prueba 0°, 45°, 90°, 135°).
- Si usas transparencia, recuerda que el PNG la conserva.
- Descarga el PNG y compruébalo en tu visor de imágenes.
El procesamiento se realiza localmente en tu navegador.