Daremo un'occhiata a dieci dei migliori generatori di gradienti CSS che è possibile utilizzare per creare una varietà di stili di sfumatura (e avere l'output CSS direttamente!). Codificare una sfumatura a mano non è divertente (specialmente una volta superata una semplice sfumatura a due colori), quindi questi strumenti sono indispensabili nella cartella dei segnalibri.
Uno degli elementi più alla moda nella progettazione di siti Web è l'utilizzo di uno sfondo sfumato o di una sovrapposizione di colori. Un gradiente lineare a due colori è la variazione più popolare di questa tendenza. E mentre i gradienti potrebbero Guarda fantasioso e complicato, in realtà sono abbastanza facili da creare e distribuire? se stai usando lo strumento giusto!
CoolHue
CoolHue è una collezione impressionante di combinazioni di sfumature pre-fatte. Dai rosa e arance ai blu e ai verdi, c'è tutto, dai gradienti con un contrasto sorprendente ai cambiamenti morbidi.
Anche se non hai un grande controllo sulla personalizzazione delle opzioni con CoolHue, saprai subito se una delle combinazioni di colori funziona per te, perché tutte le opzioni sono direttamente sullo schermo.
E con un clic puoi copiare il CSS. (È così. Seriamente!) Se vuoi un download, ogni file è anche disponibile come PNG.
Gradiente CSS
Gradiente CSS ha un sacco di opzioni di commutazione e numeriche in modo da poter raccogliere fino a tre colori e creare un gradiente CSS personalizzato.
Le levette sono facili da usare e anche qualcuno con poca esperienza di colore può capire come creare un gradiente utilizzabile. Inoltre, ci sono alcune sfumature di avviamento in diversi stili diversi per l'ispirazione.
Una delle migliori caratteristiche di questo strumento potrebbe essere l'alto livello di controllo che hai su ogni dettaglio del gradiente che crei. Il codice viene visualizzato di seguito sullo schermo in modo da poter vedere tutto mentre lavori.
Gradienti dell'interfaccia utente
Ogni sfumatura include un clic per copiare CSS o un jpg scaricabile. UI Gradients è un generatore di gradienti a schermo intero. Il vantaggio di vedere le variazioni di colore a grandezza naturale è che puoi davvero vedere come appariranno con i tuoi attuali progetti di design.
UI Gradients include molte opzioni di sfumatura pre-fatte. Sfoglia la raccolta o cerca per colore. Gamma scelta da due a tre colori con motivi lineari.
Non ti piace quello che vedi? Gli utenti possono anche aggiungere dettagli sul gradiente al file gradients.json nel repository del progetto e inviare una richiesta di pull.
CSSmatic
CSSmatic è un semplice generatore di gradienti con pulsanti di facile clic per aiutarti a personalizzare le scelte di colore, gli arresti e la rotazione. Gli utenti possono creare sfumature lineari o radiali.
Inizia con uno dei semplici preset - ci sono alcune belle opzioni monocromatiche qui - e aggiusta fino ad ottenere il gradiente giusto. Quindi copia il codice e sei pronto per partire.
Ultimate CSS Gradient Generator
Ultimate CSS Gradient Generator assomiglia molto a CSSmatic e le funzioni sullo schermo sono simili, ma ha anche altre funzionalità.
Lo strumento include una tabella di compatibilità del browser, più formati di colore, possibilità di importare un'immagine gradiente e include più di 135 preset personalizzati. Gli utenti possono anche importare sfumature da CSS esistenti e apportare modifiche. (Questa può essere un'ottima opzione per modificare un gradiente sul tuo sito che non sembra proprio come desideri.)
ColorSpace
Ogni sfumatura CSS viene fornita con un URL univoco che è possibile condividere con i membri del team mentre si lavora con le opzioni di colore. ColorSpace è un altro strumento di sfumatura a schermo intero con un sito Web altamente visivo.
È facile da usare Scegli un orientamento (lineare o radiale) per il tuo gradiente, aggiungi due colori usando i pulsanti e il selettore dei colori, quindi fai clic su Genera.
Mentre questo strumento è ancora in beta, funziona bene. E il codice è giusto sullo schermo per poterlo copiare nei progetti. Tutto quello che ti serve dal gradiente visivo al CSS è giusto sullo schermo. E se non ti piacciono le tue scelte di colore è facile cambiarle e fare nuovamente clic su generate.
CSS Gradient Generator
CSS Gradient Generator produce codice usando una semplice interfaccia grafica utente. Il CSS funzionerà su tutti i browser che supportano CSS3.
Il generatore ti consente di creare sfumature lineari e radiali, oltre a poter importare il codice gradiente CSS esistente da modificare. Include anche alcuni preset per avviare le visualizzazioni a gradiente.
Fabbrica CSS3
CSS3 Factory è uno strumento semplice che funziona meglio se sai quali colori vuoi usare per un gradiente CSS.
Questa opzione senza campane e fischi ti permette di inserire le scelte di colore, impostare una direzione per i colori e copiare il codice. C'è una piccola finestra di anteprima per vedere come appariranno le sfumature, ma questo strumento non include alcun preset.
CSS-Gradient
CSS-Gradient è un generatore all-in-one con tutorial per il gradiente.
Lo strumento include caselle per selezionare due scelte di colore in esadecimale o RGB, opzioni direzionali, lineari o radiali. (Quindi questo strumento è probabilmente il migliore se si ha un'idea di quali colori si desidera utilizzare.)
Copia il codice e applicalo al tuo design.
Ma ciò che è bello di questo strumento è che ci sono un sacco di informazioni utili sotto la pergamena per gli utenti sui gradienti, come funzionano i gradienti CSS e le differenze tra le opzioni lineari e radiali. Tutte queste risorse sono particolarmente interessanti per i principianti.
GradientGenerator
GradientGenerator è un ottimo strumento per innescare una leggera ispirazione al gradiente. Inizia con uno dei preset: ci sono molte opzioni tra cui scegliere e poi aggiungi le tue personalizzazioni per un gradiente unico.
Questo strumento è ricco di personalizzazioni e include anche impostazioni semplici, avanzate ed esperte da scegliere in base al tuo livello di abilità e capacità di corrispondenza dei colori.
È possibile fare clic per copiare il CSS, scaricare un PNG, afferrare un codice QR per eseguire il test sul dispositivo mobile o generare un collegamento di condivisione. Questo strumento ha anche altre opzioni di configurazione piuttosto avanzate con cui puoi giocare, incluso il tipo di codice generato.
Conclusione
Uno dei maggiori vantaggi dell'utilizzo di un generatore di gradazioni CSS è che la maggior parte di questi strumenti mostra come apparirà la sfumatura sullo schermo durante la generazione del codice corrispondente. È possibile modificare visivamente i colori, le sovrapposizioni, la direzione, l'opacità e altro ancora direttamente sullo schermo.
Quindi tutto quello che devi fare è copiare il codice e incollarlo nel tuo file CSS per iniziare. Un generatore di gradazioni CSS è un modo semplice e veloce per creare un gradiente di sito Web che ti piacerà e che è facile da usare. Speriamo che una delle opzioni in questo elenco funzioni alla grande.