Generatore di sfumature a maglia

Crea uno sfondo multicolore uniforme usando 4, 6 o 9 punti mobili. Scegli il colore di ogni punto, trascinalo sull’area di lavoro, prova una palette casuale selezionata e poi esporta il risultato in SVG o PNG. Puoi anche copiare un’approssimazione CSS basata su sfumature radiali sovrapposte. Il progetto rimane in questa scheda del browser mentre lavori.

Come creare una sfumatura effetto maglia

  1. 1

    Scegli la griglia

    Inizia con 4, 6 o 9 punti di controllo. Un numero maggiore crea più aree cromatiche distinte.

  2. 2

    Scegli i colori

    Usa il selettore di ogni punto. L'editor memorizza colori HEX a sei cifre.

  3. 3

    Sposta i punti

    Trascina un punto, inserisci la posizione orizzontale e verticale oppure usa i tasti freccia.

  4. 4

    Scegli il formato

    Seleziona un formato orizzontale, panoramico o quadrato per i file SVG e PNG.

  5. 5

    Esporta il progetto

    Scarica PNG o SVG oppure copia l'approssimazione CSS con sfumature radiali.

Come vengono prodotti i tre risultati

  • PNG usa la stessa fusione dei colori in base alla distanza dell’anteprima. Se il formato scelto ha proporzioni diverse, gli stessi punti relativi vengono adattati alle nuove dimensioni.
  • SVG sovrappone sfumature radiali negli stessi punti di controllo e resta nitido quando viene ingrandito.
  • CSS crea un livello radial-gradient() per ogni punto sopra un colore di base, senza richiedere un file immagine.

SVG e CSS utilizzano gli stessi dati del progetto, ma sono approssimazioni leggere dell’effetto maglia. I loro pixel non saranno identici a quelli del PNG.

Consigli sulla palette

  • Tonalità vicine producono in genere passaggi delicati.
  • Tonalità contrastanti rendono più evidenti i confini tra le aree.
  • Le palette casuali sono punti di partenza, non garanzie di leggibilità.
  • Verifica il contrasto di testo, icone e comandi sovrapposti allo sfondo.

Posizionare i punti

Trascina un punto numerato nell’anteprima oppure selezionalo con il focus e usa le frecce. Tieni premuto Maiusc per spostarlo di cinque punti percentuali. I campi orizzontale e verticale permettono anche un inserimento preciso.

I punti possono raggiungere il bordo. Avvicinandone diversi concentrerai i colori in una zona; distanziandoli darai più spazio a ogni colore.

Impieghi comuni

  • Sfondi per testate e divisori di sezione.
  • Immagini social e miniature video.
  • Sfondi per presentazioni e illustrazioni.
  • Schermate iniziali e pannelli decorativi.

Il PNG è il formato più fedele all’anteprima. Usa SVG quando devi ridimensionare senza perdere nitidezza o CSS per uno sfondo modificabile senza immagine separata.

Privacy e memoria del browser

Colori, posizioni e risoluzione restano nella memoria del browser e in sessionStorage. Non vengono aggiunti agli URL del percorso né allo stato dei nostri server. Lo strumento può registrare che è avvenuta un’esportazione senza includere i valori del progetto.

Il progetto può essere ripristinato da sessionStorage per un massimo di sei ore finché la scheda rimane aperta. La chiusura della scheda di solito lo elimina prima, quindi scarica o copia ciò che vuoi conservare.

Domande frequenti

Usano metodi di rendering differenti. PNG fonde i pixel in base alla distanza, mentre SVG e CSS sovrappongono sfumature radiali. Colori e posizioni coincidono, ma non ogni singolo pixel.

Sì. Trascina un punto, usa i campi della posizione oppure selezionalo e premi i tasti freccia. Tieni premuto Maiusc per passi più ampi.

L’editor salva colori HEX a sei cifre. Usa il selettore oppure converti prima RGB o HSL in HEX.

No. Il CSS copiato approssima l’effetto sovrapponendo normali sfumature radiali.

Può essere ripristinato da sessionStorage per un massimo di sei ore nella scheda attuale. Chiudendo la scheda viene normalmente rimosso prima. Non passa tramite i nostri server e non compare negli URL del percorso.

Strumenti correlati