Qual e la differenza tra un gradiente lineare e uno radiale?

Un gradiente lineare fonde i colori lungo una linea retta secondo l'angolo che imposti, mentre un gradiente radiale diffonde i colori verso l'esterno da un punto centrale. Cambia il tipo per vedere come ciascuno si aggiorna nell'anteprima.

Il cursore dell'angolo funziona per i gradienti radiali?

Il cursore dell'angolo controlla la direzione di un gradiente lineare. Per i gradienti radiali i colori si diffondono dal centro, quindi l'angolo non ha effetto visibile, ma i due selettori di colore si applicano comunque.

Come uso il CSS generato nel mio progetto?

Copia la regola generata e incollala nel tuo foglio di stile sull'elemento desiderato, ad esempio come proprieta background. Non servono librerie o importazioni aggiuntive.

Generatore di Gradienti CSS

Tipo

Angolo: 90deg

Colore 1

Colore 2

CSS

.element {
  background: linear-gradient(90deg, #2b59ff, #ff5e9c);
}

Cosa fa questo strumento

Il Generatore di Gradienti CSS ti aiuta a progettare un gradiente a due colori e ti fornisce il CSS esatto da incollare nel tuo progetto. E utile per gli sviluppatori frontend, i designer e chiunque crei una landing page, un pulsante, una scheda o una sezione hero e desideri uno sfondo pulito senza scrivere la sintassi a mano. Vedi il risultato mentre lo regoli, quindi non devi indovinare come apparira il gradiente finale.

Come usarlo

Scegli il tipo di gradiente, lineare o radiale, per impostare il modo in cui i colori si fondono.
Trascina il cursore dell’angolo per ruotare la direzione di un gradiente lineare.
Seleziona il tuo primo colore con il selettore di colore.
Seleziona il tuo secondo colore con il secondo selettore di colore.
Guarda l’anteprima in tempo reale e il codice CSS aggiornarsi all’istante quando modifichi qualsiasi controllo.
Copia la regola generata, come una riga background: linear-gradient(…), e incollala nel tuo foglio di stile.

Un esempio rapido

Imposta il tipo su lineare, trascina l’angolo a 90 gradi, poi scegli un viola intenso e un azzurro tenue. L’anteprima mostra una sfumatura da sinistra a destra e il codice ti da qualcosa come background: linear-gradient(90deg, #7c3aed, #60a5fa). Incolla quello su un pulsante o una sezione e hai finito. Se un gradiente sembra piatto, prova a scegliere due colori piu distanti sulla ruota dei colori per ottenere piu contrasto.

Tutto funziona direttamente nel tuo browser, quindi i tuoi colori restano privati, nulla viene caricato e lo strumento e completamente gratuito senza registrazione.

Domande frequenti

Qual e la differenza tra un gradiente lineare e uno radiale?: Un gradiente lineare fonde i colori lungo una linea retta secondo l'angolo che imposti, mentre un gradiente radiale diffonde i colori verso l'esterno da un punto centrale. Cambia il tipo per vedere come ciascuno si aggiorna nell'anteprima.
Il cursore dell'angolo funziona per i gradienti radiali?: Il cursore dell'angolo controlla la direzione di un gradiente lineare. Per i gradienti radiali i colori si diffondono dal centro, quindi l'angolo non ha effetto visibile, ma i due selettori di colore si applicano comunque.
Come uso il CSS generato nel mio progetto?: Copia la regola generata e incollala nel tuo foglio di stile sull'elemento desiderato, ad esempio come proprieta background. Non servono librerie o importazioni aggiuntive.