Generatore di gradienti

Con Generatore di gradienti, designer e sviluppatori front-end possono regolare un’interfaccia prima di implementarla. Crea un gradiente lineare CSS.

Crea un gradiente lineare CSS. Puoi usarlo gratis nel browser senza creare un account e controllare il risultato prima di proseguire.

Come si usa

Inserisci prima l'angolo del gradiente in gradi; decide in quale direzione si muovono i colori attraverso l'elemento.
Aggiungi il colore iniziale nella riga successiva e il colore finale sotto.
Genera il gradiente: l'area dei risultati mostra una riga di CSS che puoi copiare direttamente nel tuo progetto.
Incolla quella riga nella regola su cui stai lavorando, poi ricarica la pagina per vedere come appare davvero.
Cambia l'angolo o un colore e genera di nuovo tutte le volte che vuoi prima di scegliere uno stile definitivo.

Esempio

Il campione usa un angolo di 45 gradi con un blu molto scuro all'inizio e un verde intenso alla fine. Una volta generato, confronta la riga ottenuta con ciò che avevi in mente: l'angolo imposta la direzione mentre l'ordine dei colori decide la tonalità a ciascuna estremità.

Input

45
#0F172A
#16A34A

Risultato

background: linear-gradient(45deg, #0F172A, #16A34A);

Limiti e formati

Vengono prodotti solo gradienti lineari; le varianti radiali, coniche e ripetute richiedono una sintassi diversa.
Due colori danno una miscela semplice, ma gli stop intermedi non possono essere regolati da questa pagina.
Il risultato dipende dallo schermo e dal browser del visitatore, e una miscela molto contrastata può stancare l'occhio quando c'è del testo sopra.
Controlla il contrasto se metti del testo sopra il gradiente, perché la leggibilità non si può giudicare solo dal codice.

Dove avviene il trattamento

Il gradiente viene generato nel tuo browser. L'angolo e i due colori restano sul tuo dispositivo, non viene trasmesso nulla e non viene conservato nulla quando lasci la pagina, quindi lo snippet che copi viene costruito interamente sulla tua macchina.

Domande frequenti

Posso riutilizzare il codice generato in un'altra regola?

Sì. La riga segue la sintassi standard di un gradiente lineare e si adatta a qualsiasi dichiarazione di background. Copiala così com'è e cambia solo i colori se in seguito la tua palette cambia.

Come faccio a ottenere un gradiente che va dall'alto verso il basso?

Regola l'angolo a piccoli passi e mantieni il valore che mette il primo colore nella parte superiore dell'elemento. Poiché il risultato si verifica ricaricando la pagina, di solito bastano uno o due tentativi per trovare la direzione desiderata.

Posso usare più di due colori?

Questa pagina parte da un colore iniziale e un colore finale, quindi una miscela a tre tonalità non può essere impostata qui direttamente. Puoi comunque generare una prima coppia e poi aggiungere gli stop extra a mano nel tuo foglio di stile.