I gradient sono uno di quei trend che non muoiono mai definitivamente.
A volte spariscono, ma è quasi sempre per brevi periodi, per poi tornare di nuovo a dominare gli schermi dei nostri device.
Che siano adattati ad elementi di Glassmorphism e Neumorphism, oppure infilati in nuovi trend come l’Aurora UI, dalle sfumature più sfacciate a quelle più soft, i gradient la fanno da padrone nei layout più disparati.
Non come la pensiate voi, ma io trovo le sfumature sono assolutamente fantastiche e d’effetto.
Oggi vorrei condividere con voi alcuni siti che vi aiuteranno a trovare i gradient più adatti ad ogni vostra esigenza.
Gradient collection
100 gradient completamente gratuiti (“Rainbow, pastel, neon”), scaricabili singolarmente dal sito a 4000×3000 px, o effettuando il download dell’intera collezione, inserendo il proprio indirizzo email.
Il download del pack completo presenta i gradient in formato sketch, png, ai, jpg ed eps.
Le combinazioni di colore offerte sono veramente bellissime.
Hixle
Personalmente, trovo questo sito meno pratico rispetto al precedente, ed un po’ old school.
I gradient offerti sono meno fantasiosi, più “classici”.
Non sono scaricabili, ma ogni anteprima presenta i codici HEX di ogni colore e la possibilità di effettuare una ricerca filtrata per colore (ma solo entrando nel singolo gradiente).
Webgradients
Una raccolta di 180 gradient lineari, gratuiti sia per uso personale che commerciale.
Sul sito è possibile scaricare file png a 2400×2000 px, oppure copiare i codici HEX o direttamente il CSS con un semplice clic (con un conseguente feedback della vostra azione veramente simpatico e diverso per ogni sfumatura).
Come bonus, sono offerti anche pacchetti per Sketch e Photoshop.
Ui Gradients
Questo sito è l’apoteosi della semplicità. La visualizzazione del gradient a schermo intero, può essere cambiata con una classica a blocchi (“Show all gradients”).
Potete copiare i codici HEX, ruotare la sfumatura a vostro piacimento, copiare il CSS oppure scaricare il jpg del gradiente selezionato.
Anche qui, nella visualizzazione a blocchi, è possibile effettuare una ricerca per colore.
Grabient
Altro sito di semplicissimo utilizzo, anche se con un numero di proposte abbastanza limitato.
Per ogni gradient avete la possibilità di cambiare l’angolo di sfumatura, editare i colori che lo compongono (anche aggiungendone), cambiare le posizioni dei singoli colori, copiare i codici HEX, oppure il CSS.
Molto carino, anche se mi sarei aspettata qualcosa di più.
Gradient Hunt
Rispetto agli altri siti presentati fino ad ora, Gradient Hunt offre la possibilità di filtrare i gradient in base alla tipologia (radial, linear) o in base alla popolarità.
Per ogni gradient, è possibile scaricare il png oppure copiare il CSS:
A pagamento è scaricabile una collezione di 500 gradient per Photoshop.
Gradienta
Gradient multicolor, geometrici ed astratti, decisamente diversi rispetto a quelli classici visti fino ad ora.
Ogni sfumatura è scaricabile in jpg o riproducibile copiando il codice CSS direttamente dal sito.
Nella sezione editor potere sbizzarrirvi modificando colori, angolazioni, tipologia (radial, angular ecc) e copiando il codice della vostra crezione.
Gradienta è open source, potete utilizzare tutto a gratis e senza attribuzione.
Mesh Gradient
Un onboarding molto chiaro spiega in pochi semplici passi come creare il vostro personalissimo gradient.
Spostando i punti posizionati sulla superficie della sfumatura e cambiato i colori a vostro piacimento, potete dare vita a combinazioni uniche. Una volta finita la vostra opera d’arte, potrete esportare il png.
Se siete nel dubbio, potrete utilizzare la funzione random, resettare o visitare la gallery.
Una pecca: alcuni comandi sono in grigio scuro su fondo nero. Auguri a trovarli.
Coolors Gradients
Semplicissimo e completo, Coolors offre la possibilità di selezionare i gradient da una galleria e di editarli, copiare ill codice HEX, vederli a fullscreen, copiare URL, CSS o scaricarli come immagine.
Se quelli in gallery non vi bastano, potete dare sfogo alla fantasia sul Gradient Maker del sito, dove scegliere colori, posizioni, tipologie, rotazioni e tanto altro.
Gradients Guru
Gradients Guru presenta una collezione di 198 gradienti e 15 metodi di fusione per le vostre immagini.
I gradient sono divisi tra Cool e Strong, corredati di codice HEX e possibilità di copiare il CSS.
Per ciascuna sfumatura, è possibile testarne la sovrapposizione su una immagine a vostra scelta, direttamente sul sito, cambiando stili e trasparenze.
