Generatore di immagini con gradiente radiale online

Come ottenere un gradiente radiale perfetto per i tuoi progetti

Questo strumento ti permette di creare immagini con un gradiente radiale (circolare) senza dover usare software complessi. È utile per sfondi, banner, copertine social o elementi grafici.

Esempio pratico

Supponiamo che tu voglia un'immagine 1200x630 pixel (formato standard per link condivisi) con un gradiente dal blu al rosa. Imposta larghezza 1200, altezza 630, colore centro #3B82F6, colore bordo #EC4899, centro 50%, 50% e scala 100%. Il raggio esterno sarà circa 677.66 pixel, raggiungendo gli angoli. Se imposti la scala al 200%, il raggio si dimezza a circa 338.83 pixel, lasciando gli angoli con il colore del bordo.

Parametri e limiti

• Centro: percentuali orizzontale e verticale da 0 a 100. Il valore 0%,0% posiziona il centro nell'angolo in alto a sinistra.
• Scala: da 1% a 500%. Il raggio esterno è calcolato come hypot(larghezza, altezza) / (2 * scala).
• Dimensioni: larghezza e altezza da 1 a 10000 pixel, con un massimo di 24 milioni di pixel totali. Se richiedi dimensioni troppo grandi, vengono ridotte proporzionalmente.
• Trasparenza: se attivata, ogni valore percentuale viene convertito in alpha (1 - percentuale/100). Ad esempio, 25% diventa alpha 0.75.
• Il gradiente ha solo due stop di colore fissi (0 e 1). Non sono disponibili modalità ellittiche, stop aggiuntivi, texture o immagini caricate.

Limitazioni note

Lo strumento non supporta gradienti ellittici, più di due colori, sfocature o texture. La generazione avviene interamente nel browser: nessun file viene caricato su un server.

Domande frequenti

Come faccio a far sì che il gradiente raggiunga gli angoli?

Con il centro al 50%,50% e scala 100%, il raggio esterno è calcolato per raggiungere gli angoli (circa 677.66 pixel per una tela 1200x630). Se sposti il centro, il raggio non viene esteso per coprire l'angolo più lontano, quindi potresti vedere il colore del bordo negli angoli.

Perché la mia immagine ha gli angoli tutti dello stesso colore?

Se la scala è maggiore di 100%, il raggio esterno è più piccolo della distanza dagli angoli, quindi le aree oltre il cerchio vengono riempite con il colore del bordo. Per coprire gli angoli, usa scala 100% o inferiore.

Posso usare la trasparenza per creare un effetto dissolvenza?

Sì, attiva l'opzione trasparenza e imposta la trasparenza del centro e del bordo. Ad esempio, con trasparenza centro 0% e bordo 100%, il gradiente svanisce verso il bordo. Il PNG supporta la trasparenza, quindi il risultato avrà uno sfondo trasparente dove il colore è completamente trasparente.

Checklist per un risultato ottimale

• Definisci le dimensioni appropriate per il tuo uso (es. 1200x630 per social).
• Scegli colori che contrastino bene.
• Imposta il centro dove desideri il punto focale.
• Regola la scala per controllare la diffusione del gradiente.
• Se vuoi uno sfondo trasparente, attiva la trasparenza e imposta i valori.
• Genera e controlla l'anteprima.
• Scarica il PNG.