Generador de imagen con degradado radial en línea
Crea imágenes PNG con degradado radial: elige colores, centro, escala y transparencia. Genera y descarga al instante.
Empezar a usar
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 sqrt(w² + h²) / (2 × (s / 100)). 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 transparencia 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 transparencia para cada extremo. El PNG resultante conserva el canal alfa.
En la fórmula, w y h son las dimensiones reales de salida y s el porcentaje de escala introducido: 100 equivale al factor 1. Transparencia 0% es opaco; 100% es transparente. El alfa del borde también se aplica fuera del círculo.
r = sqrt(w² + h²) / (2 × (s / 100))
El procesamiento se realiza localmente en tu navegador.