Generador de imagen con degradado radial en línea

Características y ejemplo práctico

Este generador crea un degradado radial con dos paradas de color fijas (centro y borde). El navegador dibuja círculos concéntricos desde el centro elegido hasta un radio exterior calculado como hypot(ancho, alto) / (2 × escala). Por ejemplo, para un lienzo de 1200×630 px con centro en (50%, 50%) y escala 100%, el radio es aproximadamente 677.66 px, lo que cubre todas las esquinas. Si aumentas la escala al 200%, el radio se reduce a la mitad (≈338.83 px) y las esquinas quedan fuera del degradado, mostrando el color del borde.

Controles disponibles

• Color del centro y color del borde: selectores de color.
• Ancho y alto: dimensiones en píxeles (1–10000).
• Centro horizontal y vertical: porcentajes (0–100%).
• Escala: porcentaje (1–500%).
• Transparencia en extremos: activable, con porcentajes de opacidad para centro y borde.

Limitaciones conocidas

No hay modo elíptico, ni paradas de color adicionales, ni desplazamiento del foco, ni texturas, ni carga de imágenes. El radio no se ajusta automáticamente al mover el centro; por tanto, si desplazas el centro hacia una esquina, la esquina opuesta puede quedar fuera del degradado. Las dimensiones muy grandes se reducen proporcionalmente para no superar el límite de 24 millones de píxeles.

Preguntas frecuentes

¿Qué ocurre si muevo el centro al 0%, 0%?

El centro se coloca en la esquina superior izquierda (origen) y el degradado se extiende desde allí. No se revierte automáticamente al 50%, 50%.

¿Cómo afecta la escala al tamaño del degradado?

La escala controla el radio exterior: cuanto mayor es la escala, menor es el radio. Por ejemplo, con escala 200% el radio se reduce a la mitad, dejando las esquinas con el color del borde.

¿Puedo obtener transparencia en el PNG?

Sí, activa la opción de transparencia y define el porcentaje de opacidad para cada extremo. El PNG resultante conserva el canal alfa.