CSS Gradient Generator

Come si usa

1. Scegli il tipo di gradiente — lineare o radiale — e seleziona i tuoi colori.
2. Regola l'angolo con lo slider (solo lineare) e guarda l'anteprima aggiornarsi in tempo reale.
3. Copia il CSS con un clic e incollalo nel tuo foglio di stile.

Informazioni su questo strumento

I gradienti CSS sono i pattern di sfondo del web moderno. Un gradiente lineare mescola i colori lungo una linea a un angolo scelto; un gradiente radiale li mescola da un punto centrale verso l'esterno. Entrambi si dichiarano in una singola proprietà CSS, si renderizzano a qualsiasi risoluzione senza un file immagine e non costano nulla in peso di rete. Questo generatore costruisce la dichiarazione visivamente.

Scegli due o tre colori, imposta l'angolo per il lineare o lascialo per il radiale, e l'anteprima mostra il risultato. La riga CSS sottostante è pronta da copiare — incollala come proprietà background e funziona in ogni browser rilasciato nell'ultimo decennio. Tre colori producono gradienti più ricchi di due, e il colore centrale è quello che fa la differenza nel design.

Lo strumento gira nel tuo browser. Non c'è nessuna chiamata al server, nessuna immagine generata, nessun file da scaricare. Ciò che vedi nell'anteprima è ciò che il browser renderizza dal CSS, il che significa che il risultato in produzione sarà identico.

Domande frequenti