▤

Generatore di Gradienti CSS

Crea un gradiente lineare o radiale con anteprima in tempo reale e copia il CSS.

I tuoi file restano su questo dispositivo

I file vengono elaborati nel browser, mai caricati su un server. Il sito scarica il codice e le risorse necessarie. Senza account né tracciamento.

Usa Scarica per salvare questo strumento in un unico file HTML da usare offline.

Privacy →

Tipo

Angolo (90°)

Colore 1 Posizione 1 (0%)

Colore 2 Posizione 2 (100%)

output

Prova un esempio svolto

Esempio

Scegli il tipo lineare, imposta l’angolo a 135 e i colori su #ff7e5f e #feb47b. Il CSS è background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Spostando il primo stop a 20, il primo colore resta pieno nel primo 20% del riquadro.

Da ricordare

0deg punta verso l’alto e 90deg verso destra, quindi 135deg va dall’angolo in alto a sinistra a quello in basso a destra. Se c’è testo su una sfumatura, controllane il contrasto con entrambi i colori estremi.

Informazioni su questo strumento

Crea un gradiente lineare o radiale a due colori scegliendo colori, posizioni e un angolo, poi copia la regola background. L'anteprima in tempo reale funziona interamente nel tuo browser.

Domande frequenti

Cos'è l'angolo in un gradiente lineare?

L'angolo imposta la direzione della transizione di colore: 0° punta verso l'alto, 90° verso destra, 180° verso il basso, e così via.

Quando dovrei usare il radiale invece del lineare?

Usa il radiale per irradiare i colori verso l'esterno da un punto centrale (come un faretto); il lineare li sfuma lungo una linea retta.