ItalianoIT

Generatore di gradienti CSS – lineare, radiale, conico

Scegli i punti colore e l’angolo: il codice CSS del gradiente è pronto da copiare.

Testi e file restano nel tuo browser: non viene inviato nulla a un server.

Punti colore

Clicca su un punto libero della barra per aggiungere un punto colore, oppure trascina una maniglia per spostarlo.

Codice CSS

La riga background-color è un colore medio per gli ambienti che non mostrano i gradienti.

Come si usa

  1. Scegli un tipo – lineare, radiale o conico – poi regola l’angolo o il centro.
  2. Aggiungi punti colore cliccando sulla barra o con “Aggiungi punto”. Trascina una maniglia o scrivi una percentuale per spostare un punto.
  3. Scegli il colore di ogni punto con il selettore, oppure scrivi un codice come #rrggbbaa per aggiungere trasparenza.
  4. Copia il codice CSS e incollalo nel tuo foglio di stile. “Casuale” ti fa scoprire nuove combinazioni.

Domande frequenti

Che differenza c’è tra lineare, radiale e conico?

Il gradiente lineare mescola i colori lungo una linea retta, il radiale li diffonde da un centro verso l’esterno e il conico li fa ruotare in senso orario attorno al centro. Il conico è adatto a grafici a torta e ruote dei colori.

In che direzione va 0deg?

Con linear-gradient, 0deg va dal basso verso l’alto e 90deg da sinistra a destra. Un gradiente conico parte da 0deg, cioè dalle ore 12 di un quadrante.

I gradienti funzionano sui browser vecchi?

I gradienti lineari e radiali funzionano su quasi tutti i browser, quelli conici sui browser usciti più o meno dal 2020. Dove il gradiente non si può mostrare, subentra il colore background-color.

Strumenti simili

Selettore di coloriHEX, RGB, HSL e CMYK insiemeFiltri CSSSfocatura, luminosità, grigi e altroPalette per Tailwind CSSUn colore, una scala 50–950Generatore di ASCII artTesto e foto in caratteri

Tutti gli strumenti