Gradiente Generator

Crea gradienti lineari, radiali e conici con 2-5 colori e angoli personalizzati. Anteprima live, preset, casuale (Spazio), output Tailwind e CSS, download PNG. Premi Spazio per randomizzare.

o Spazio

Direzione e forma

Angolo 135°

Tappe di colore (2)

Output CSS

Cos'è un generatore di gradienti?

Transizioni morbide, zero immagini

Un gradiente fonde due o più colori lungo una linea, da un centro o intorno a un punto. I browser lo rendono come CSS nitido indipendente dalla risoluzione, perfetto per hero, pulsanti, card e overlay con zero richieste di rete.

Questo strumento va oltre le basi a 2 colori: tipi lineare, radiale e conico, fino a 5 stop con posizioni, 8 preset, ispirazione casuale, classi arbitrary Tailwind ed esportazione PNG.

Come si usa

01

Scegli tipo e colori

Lineare, radiale o conico. Modifica ogni stop con selettore, HEX o cursore 0-100%. Aggiungi fino a 5, rimuovi fino a 2.

02

Imposta la direzione

Cursore angolo più preset 45° per lineare e conico, forma e posizione per radiale. Prova i preset o Spazio per casuale.

03

Copia e pubblica

Copia CSS o Tailwind, scarica CSS e PNG, oppure condividi l'URL, stop e angolo restano in ?type=&angle=&stops=.

Esempi reali

Sfondi hero: 135deg indaco verso rosa

Le velature diagonali a 2 colori restano leggibili sotto testo bianco e si comprimono in una riga CSS. Parti dal preset Indigo Pink.

Pulsanti e CTA: 90deg a 3 stop

Triple stile tramonto aggiungono profondita agli elementi piccoli. Mantieni lo stop centrale vicino al 50% per fusioni uniformi sugli hover.

Bagliori e riflettori: radiale

L'ellisse radiale in alto crea una morbida aurora dietro le card. Abbinala a superfici scure per overlay sicuri nel contrasto.

Anelli di avanzamento: conico

Le rotazioni coniche da angolo sono adatte a grafici a torta e loader. Due stop con posizioni nette danno anelli segmentati.

Pubblicazione Tailwind

Copia la classe arbitrary bg-[linear-gradient(...)] direttamente nel markup, oppure salva lo snippet di configurazione per riuso.

Immagini social e OG

Scarica istantanee PNG 1200×630 per copertine, miniature e segnaposto senza aprire uno strumento di design.

Gradienti animati e testo gradiente

Riutilizza qualsiasi output: anima background-position per sfondi shimmer, oppure abbinalo a background-clip:text per titoli in gradiente. Copia il CSS e aggiungi due keyframes.

Domande frequenti

1Come creo un gradiente CSS?

Scegli un tipo, imposta 2-5 colori con posizioni, regola angolo o centro e copia la riga background:. Percorso più facile: scegli un preset, ritocca uno stop, premi Copia CSS.

2Lineare contro radiale contro conico: quando usarli?

Lineare per hero e pulsanti lungo un angolo. Radiale per bagliori da un punto (riflettori, aurora). Conico per rotazioni intorno a un centro come grafici a torta, loader e ruote colore.

3Che differenza c'e tra “to right” e “90deg”?

Le parole chiave vanno da angolo ad angolo in base alla forma del box. Gli angoli sono direzioni bussola esatte (0° verso l'alto, 90° verso destra, in senso orario). Generiamo gradi cosi il gradiente appare identico con qualsiasi proporzione.

4Come funzionano stop e posizioni? Posso fare strisce?

Ogni stop e colore più 0-100%. Distanziali in modo uniforme per fusioni morbide. Sovrapponi due stop nella stessa posizione per un bordo netto a strisce. Aggiungi fino a 5, rimuovi fino a 2.

5Ottengo Tailwind, PNG e link condivisi?

Si, ogni gradiente mostra CSS più arbitrary Tailwind bg-[...]. Il popup di download offre CSS, Tailwind o PNG 1200×630. L'URL memorizza tipo, angolo e stop per la condivisione.

6Funziona in tutti i browser? Il mio lavoro viene caricato?

Lineare, radiale e conico sono baseline dal 2015 in tutti i browser moderni. Gratis per sempre, senza registrazione, e nulla lascia il tuo browser.

Generatore di Palette

Armonie casuali + modalità immagine

Convertitore Colori

HEX RGB HSL HSV CMYK LAB

Verifica Contrasto

Gradi di leggibilità testo WCAG

Generatore Palette da Immagine

Estrai la palette da qualsiasi foto