Generatore di gradienti

Genera codice linear-gradient o radial-gradient con anteprima in tempo reale.

Generatore di gradienti

Un risultato nel browser per pianificazione e riferimento.

Colore AColore B AngoloMode

CSS / HEX

GUIDA

Cosa controllare prima di usarlo

Quando questo strumento è utile

Usa questo strumento per creare uno sfondo web a due colori o un accento per card. Scegli i colori iniziale e finale, un tipo lineare o radiale e un angolo per ottenere sia un'anteprima sia il CSS.

Come viene prodotto il risultato

La modalità lineare crea una linear-gradient con l'angolo inserito; la modalità radiale crea una radial-gradient circolare. Il browser rende i colori intermedi tra i due stop.

Esempio pratico e interpretazione

Imposta #3366FF a #FF6655 a 90 gradi per una dichiarazione di sfondo da sinistra a destra. Copialo nel componente reale e ricontrolla il contrasto di qualsiasi testo posto sopra.

Ambito e limiti

Il generatore usa due stop di colore e non può rimuovere le differenze di interpolazione cromatica tra browser. Aggiungi stop complessi, transizioni alpha o colori wide-gamut in un editor completo.

Domande frequenti

Come sposto un colore dal Generatore di gradienti in un'altra app?

Usa il pulsante Copia sotto il risultato per copiare testo CSS, HEX o HSL. Conferma che l'app di destinazione interpreti lo stesso formato colore.

Il colore dello schermo dal Generatore di gradienti corrisponderà alla stampa?

Non automaticamente. Gli schermi RGB emissivi e la carta e l'inchiostro riflettenti usano gamut e modelli di miscelazione diversi, quindi sono ancora necessari profili di stampa e prove.

Posso approvare un design token dal Generatore di gradienti da solo?

Usalo come candidato, poi testa il vero sfondo, la modalità scura, gli stati di interazione e il contrasto del testo prima di assegnare un nome e approvare un token.