Generatore Gradienti

Crea gradienti lineari & radiali con anteprima live. Copia CSS.

Tipo

LineareRadiale

Angolo: 45°

Punti colore

#ff5e3a%

#ff2d55%

CSS

background: linear-gradient(45deg, #ff5e3a 0%, #ff2d55 100%);

Tailwind (valore arbitrario)

bg-[linear-gradient(45deg,_#ff5e3a_0%,_#ff2d55_100%)]

Come funziona

Scegli lineare o radiale e aggiungi punti di colore.
Trascina i punti e regola angolo o posizione con un'anteprima in tempo reale.
Regola ogni colore.
Copia il gradiente CSS.

A cosa serve

Progettare un gradiente di sfondo per una sezione hero.
Ottenere il CSS esatto per un gradiente a più punti.
Sperimentare tra l'aspetto lineare e quello radiale.

Da sapere

Produce un gradiente CSS; le mesh estremamente complesse vanno oltre i gradienti CSS standard.
La resa dei colori può variare leggermente tra i display.

Domande frequenti

Lineare o radiale: qual è la differenza?

Il lineare sfuma i colori lungo un asse rettilineo (ottimo per gli sfondi); il radiale sfuma verso l'esterno da un punto centrale (ottimo per bagliori e riflettori).

Posso aggiungere più di due colori?

Sì: aggiungi tutti i punti di colore che vuoi e posiziona ciascuno lungo il gradiente.

Viene caricato qualcosa?

No. Il CSS del gradiente viene generato in tempo reale nel tuo browser.

Strumenti correlati

Visualizzatore DXF

Tavolozza Colori

Convertitore Colori

Generatore Box Shadow CSS

Verifica Contrasto