Generatore di Gradiente CSS

Crea bellissimi gradienti CSS gratuitamente online. Progetta gradienti lineari e radiali con più stop di colore e copia il codice CSS immediatamente.

Preview
CSS Code

Come funziona

  1. Scegli il tipo di gradiente – lineare o radiale – in base alle esigenze del tuo design.
  2. Aggiungi stop di colore facendo clic sulla barra del cursore e selezionando i colori dal selettore cromatico.
  3. Regola l'angolo o la direzione del gradiente utilizzando il controllo di rotazione.
  4. Visualizza il risultato in tempo reale nell'area di anteprima.
  5. Copia il codice CSS generato con un solo clic e incollalo direttamente nel tuo progetto.

Esempio

Input: Gradiente lineare: da #C94B4B (0%) a #4B134F (100%), angolo 160°
Risultato: background: linear-gradient(160deg, #C94B4B 0%, #4B134F 100%);

FAQ

Sì, assolutamente. Tutta l'elaborazione avviene direttamente nel tuo browser lato client. Nessun dato viene inviato ad alcun server, quindi il tuo lavoro rimane completamente privato.

Sì, puoi aggiungere quanti stop di colore desideri per creare gradienti complessi e multicolore con transizioni fluide tra ogni stop.

Il codice generato è compatibile con tutti i browser moderni. Lo strumento aggiunge automaticamente i prefissi del fornitore necessari per una compatibilità più ampia.

No, il generatore di gradienti CSS è completamente gratuito e non richiede alcuna registrazione o accesso.

Un gradiente lineare esegue la transizione da un colore a un altro lungo una linea retta con un angolo definito, mentre uno radiale irradia verso l'esterno da un punto centrale in forma circolare.