Come costruire il tuo gradiente
Lo strumento funziona in due modi, che scegli con i pulsanti in alto. Si apre su applica sulle mie immagini, con la zona di rilascio pronta: trascina una o più foto — sono accettati JPG, PNG, WEBP, GIF e BMP — e il gradiente viene disegnato sopra ciascuna. Con più di una foto caricata, sopra l'anteprima appaiono schede con il nome dei file per passare dall'una all'altra. Sotto il secondo pulsante, crea uno sfondo, non carichi nulla: scegli i colori, il tipo di gradiente e la dimensione, e l'immagine viene generata sul momento.
Il gradiente ha quattro tipi. Lineare traccia la transizione in linea retta, con l'angolo regolato dal cursore secondo la stessa convenzione del CSS, dove 0 gradi punta in alto. Radiale parte dal centro e si espande in cerchio. Conico ruota i colori attorno al punto centrale e produce quell'effetto a ventaglio che si vede negli sfondi moderni. Nessuno disattiva il gradiente: sopra le tue foto l'immagine passa intatta e riceve solo le finiture; nella modalità crea uno sfondo, il primo colore diventa una tinta piena. I colori stanno appena sotto: ogni riga ha il suo selettore, un controllo di posizione in percentuale e un pulsante per rimuoverlo. Puoi usare da due a sei stop di colore, e il pulsante di aggiunta inserisce un nuovo colore tra quelli esistenti. Se preferisci partire da qualcosa di pronto, la griglia delle tavolozze offre dodici combinazioni collaudate, e il pulsante del gradiente casuale estrae colori e angolo nuovi a ogni clic.
Le sei texture si applicano sopra il gradiente e la loro intensità è regolabile. La grana pellicola aggiunge grana monocromatica: varia solo la luminosità dei pixel e lascia in pace il colore, ed è la soluzione di riferimento per eliminare le bande che compaiono nei gradienti lisci. Il rumore di colore fa esattamente il contrario, varia solo il colore e mantiene intatta la luminosità, dandoti l'aspetto di una foto scattata a ISO alto. Linee traccia tratti diagonali e Punti crea una trama regolare, entrambi utili per sfondi con motivo grafico. Carta unisce una grana morbida a un leggero scurimento dei bordi, come carta stampata. A parte le texture ci sono due finiture. La vignettatura scurisce i quattro bordi in modo progressivo e porta lo sguardo al centro. Il gradiente laterale fa lo stesso su un solo lato — alto, basso, sinistra o destra — con quattro tipi: scurisci per accogliere testo chiaro, schiarisci per testo scuro, usa il primo colore del gradiente, oppure sfuma il bordo fino al trasparente. I controlli di estensione e intensità definiscono fin dove arriva la fascia e quanto pesa. Entrambi si applicano per ultimi, dopo tutto il resto, quindi si comportano uguale in entrambe le modalità e la fusione non li altera.
Nella modalità crea uno sfondo, scegli una delle sei dimensioni pronte — Full HD, quadrato, storia, miniatura, Open Graph o sfondo del desktop — oppure scrivi larghezza e altezza nei campi personalizzati, fino a 6000 px per lato. Il blocco di codice CSS mostra la dichiarazione corrispondente al gradiente attuale, e il pulsante copia tutto negli appunti, pronto da incollare nel tuo foglio di stile. Per ultimo, scegli PNG, JPG o WEBP e scarica l'immagine; nella modalità sovrapposizione con più foto, il pulsante scarica tutte ti consegna il lotto in un unico file .zip.
Domande frequenti
Le immagini che carico vengono salvate da qualche parte?
No. Il gradiente viene disegnato nel tuo browser, e le immagini della modalità sovrapposizione non viaggiano mai su internet. Niente viene salvato su un server.
Devo caricare un'immagine per usare lo strumento?
No. Nella modalità crea uno sfondo scegli solo i colori e la dimensione, e il file viene generato subito. Caricare immagini serve solo per la modalità sovrapposizione, in cui il gradiente viene disegnato sopra le tue foto.
Che differenza c'è tra scaricare l'immagine e copiare il CSS?
Il CSS genera il gradiente dal vivo nel browser di chi visita il tuo sito, senza scaricare nessun file: è l'opzione più leggera, a costo di banda zero, ideale per sfondi di sezione e pulsanti. Il PNG o il JPG diventa necessario quando la destinazione non interpreta il CSS, come la copertina di una storia, la miniatura di un video, una slide o uno sfondo del desktop. Da ricordare: la texture esiste solo nell'immagine esportata, perché i gradienti CSS non hanno grana.
Quale dimensione usare per ogni social?
I preset coprono i casi più comuni: 1080×1080 per un post quadrato su Instagram o Facebook, 1080×1920 per storie e Reels, 1280×720 per una miniatura YouTube, 1200×630 per l'immagine Open Graph che appare su WhatsApp e LinkedIn, 1920×1080 per le slide e 2560×1440 per uno sfondo del desktop. Per qualsiasi altra misura, scrivi larghezza e altezza nei campi personalizzati, fino a 6000 px per lato.
A cosa serve la grana su un gradiente?
I gradienti lisci sugli schermi a 8 bit mostrano spesso bande di colore visibili, un difetto chiamato banding, e peggiora quanto più i due colori sono vicini. Uno strato leggero di grana tra il 20% e il 40% rompe quelle bande e fa leggere la transizione come continua. In più, la grana dà quella finitura da stampa diventata comune nell'identità di marca e sulle copertine di progetto.
Come metto un gradiente su una foto senza cancellare ciò che si vede?
Scegli la modalità sovrapposizione e parti con un'opacità tra il 40% e il 60%. Le modalità di fusione cambiano molto il risultato: moltiplica scurisce e va bene per mettere testo chiaro sopra, scolora schiarisce, e colore tinge la foto conservandone il contrasto originale — è la modalità che preserva più dettaglio. Per una copertina con titolo, un gradiente scuro in moltiplica sulla parte bassa tiene il testo leggibile senza nascondere l'immagine.
Posso usare solo la texture o la vignettatura, senza gradiente?
Sì. Scegli Nessuno nella prima opzione, il tipo di gradiente. Sopra le tue foto l'immagine passa intatta e riceve solo quello che attivi dopo — grana, vignettatura o gradiente laterale — il che rende lo strumento utile per dare una finitura da pellicola a una foto senza toccarne i colori. Nella modalità crea uno sfondo, Nessuno usa il primo colore come tinta piena, comodo per generare un colore pieno con grana.
Che differenza c'è tra grana pellicola e rumore di colore?
Entrambi distribuiscono variazione casuale sui pixel, ma su assi opposti. La grana pellicola altera solo la luminosità e lascia intatto il colore, riproducendo la grana fotografica: è quella che rompe le bande visibili dei gradienti lisci. Il rumore di colore fa il contrario, altera solo il colore e mantiene la luminosità, producendo puntini colorati simili a una foto scattata a ISO alto. In pratica: grana come finitura e per correggere il banding, rumore di colore quando cerchi un'aria analogica o da schermo vecchio.
A cosa serve la vignettatura e quale intensità conviene?
La vignettatura scurisce i bordi in modo progressivo e spinge l'attenzione verso il centro dell'immagine: un classico in fotografia e sulle copertine dei video, dove un volto o un prodotto deve competere con lo sfondo. Tra il 30% e il 50% l'effetto è sottile e passa inosservato, che di solito è l'ideale; oltre il 70% diventa evidente e prende un tono drammatico. Poiché la vignettatura viene disegnata per ultima, dopo il gradiente, la modalità di fusione scelta non ha effetto su di essa.
Come scurisco solo la parte bassa di una foto per mettere un titolo?
Attiva il gradiente laterale e scegli il bordo del lato dove starà il testo, lasciando il tipo su scurisci. Il valore predefinito è la sinistra, che copre il caso più comune di banner con titolo a sinistra e immagine a destra; per una copertina video, con il titolo in basso, passa al bordo inferiore. Un'estensione tra il 35% e il 50% con l'intensità intorno al 75% dà al testo bianco abbastanza contrasto senza nascondere il soggetto.
Posso applicare lo stesso gradiente a più foto?
Sì. Nella modalità sovrapposizione carica tutte le immagini che vuoi: gli stessi colori, texture, opacità e fusione vengono applicati a tutte, e il download in .zip ti consegna l'intero lotto. È la via più rapida per uniformare le copertine di un blog o le miniature di un canale.