Generatore di gradienti CSS

Genera una dichiarazione background pronta da incollare usando la funzione standard linear-gradient() o radial-gradient() — per esempio background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);. Copiala direttamente nel tuo foglio di stile o in un attributo style inline.

Usa il pulsante Aggiungi punto di colore per inserire punti aggiuntivi, poi imposta il colore di ciascun punto e la sua posizione da 0% a 100%. Lo strumento ordina i punti per posizione automaticamente, quindi puoi aggiungerli in qualsiasi ordine e il CSS generato resta coerente.

L'angolo definisce la direzione in cui i colori sfumano. 0deg orienta il gradiente verso l'alto, 90deg verso destra e 180deg verso il basso. Trascina il cursore dell'angolo per ruotare il gradiente e osserva l'aggiornamento dell'anteprima in tempo reale.

No. Il gradiente è costruito interamente nel tuo browser con CSS semplice: nessun caricamento, nessun account e niente lascia questa pagina. Puoi usarlo offline una volta caricata la pagina.