Salta al contenuto
FreeKitX

Generatore di Gradienti Mesh

Aggiungi lo strumento ai preferiti

Salva questa pagina nel browser

Sul telefono scegli Aggiungi ai preferiti dal menu Condividi o dal menu del browser.

Crea gradienti fluidi con punti di controllo interattivi, palette armoniche ed esportazione in CSS o immagini 4K nel browser.

Generatore di Gradienti Mesh e Sfondi Fluidi

Gratuito · Elaborazione locale

Crea gradienti fluidi con punti di controllo interattivi, semi casuali ed esportazione PNG in 4K.

Anteprima Gradiente dal Vivo
Tela Interattiva

Trascina i punti o usa i tasti freccia / cursori per riposizionarli.

1
2
3
4

Preimpostazioni di Design

Controlli Gradiente Mesh

Personalizza seme, punti di controllo, sfocatura e colore di base in tempo real.

Numero di Punti: 4 / 6

Sono richiesti almeno 4 punti di controllo.

#2beeb3
#0f172a
50 px
px

Regola l’intensità della sfocatura per transizioni più morbide tra i punti colore.

Impostazioni Avanzate

Usa un seme numerico per riprodurre in modo deterministico lo stesso gradiente.

Punto Selezionato: point-1
21 %
%
34 %
%

Esporta e Scarica

Variante CSS

Dichiarazioni di sfondo standard senza sfocatura filtro. Sicuro per qualsiasi elemento.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

Strumenti correlati

Risposta diretta

Un gradiente mesh è un effetto visivo moderno che combina più punti di colore radiali su una superficie bidimensionale, creando transizioni organiche e fluide senza vincoli di assi lineari rigidi.

Come usare questo strumento

1

Posizionare i punti colore e i preset

Trascina da 4 a 6 punti di controllo sul canvas o seleziona un preset armonioso per definire i fuochi cromatici.

2

Regolare morbidezza e seme PRNG

Modifica il raggio di sfocatura per transizioni più morbide o inserisci un seme numerico per riprodurre esattamente la composizione.

3

Copiare il CSS o scaricare lo sfondo

Copia dichiarazioni di sfondo leggere, preleva regole CSS complete isolate o esporta sfondi PNG ad alta risoluzione fino a 4K.

Implementazione CSS dei gradienti mesh: Solo sfondo rispetto a CSS completo

I gradienti mesh nativi nel browser si ottengono sovrapponendo più strati di radial-gradient() su un colore di sfondo solido. La modalità «Solo sfondo» fornisce dichiarazioni pulite senza filtri sfocatura sull'elemento, risultando sicura per qualsiasi contenitore. La modalità «CSS completo» applica il filtro blur a uno pseudo-elemento ::before isolato con margini estesi, assicurando che testi, link e pulsanti interni rimangano nitidi e perfettamente interattivi.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Solo sfondo: Gradienti radiali sovrapposti leggeri e privi di filtro blur; sicuro per qualsiasi elemento HTML.
  • CSS completo: Pseudo-elemento ::before isolato con filtro sfocatura; gli elementi figli mantengono nitidezza e cliccabilità.
  • Seme deterministico: L'algoritmo Mulberry32 PRNG garantisce la riproduzione identica di coordinate e tonalità.

Domande frequenti

Come funzionano i gradienti mesh in puro CSS senza l'ausilio di immagini?

Combinano diverse dichiarazioni CSS radial-gradient() con stop trasparenti su un colore di base. Il motore di rendering grafico del browser interpola i bordi sfumati sovrapposti creando un effetto visivo fluido e continuo.

Qual è la differenza fondamentale tra le modalità «Solo sfondo» e «CSS completo»?

«Solo sfondo» genera proprietà di sfondo standard prive di filtri, ideali per qualsiasi elemento. «CSS completo» sfrutta uno pseudo-elemento isolato con filtro sfocatura, offrendo una diffusione cromaticamente più ricca senza rendere sfocati testi e pulsanti figli.

Quali sono le limitazioni prestazionali e di compatibilità nei browser?

La sovrapposizione di molti gradienti radiali con filtri di sfocatura elevati può aumentare il carico di ridisegno durante lo scrolling veloce su dispositivi mobili a bassa potenza grafica. Inoltre, l'esportazione di sfondi 4K avviene localmente su Canvas e può richiedere qualche istante su dispositivi meno recenti.

Le composizioni create o le immagini esportate vengono inviate a un server esterno?

Assolutamente no. Tutti i calcoli cromatici, l'elaborazione del seme casuale, la generazione del codice CSS e il rendering Canvas avvengono al 100% all'interno del tuo browser in modo strettamente locale.

Riferimenti autorevoli e standard