Gli strumenti per sviluppatori che usi ogni giorno, tutti in un unico posto.

Convertitori, formattatori, hash, validatori e le piccole utility che continui a riaprire restano insieme invece di perdersi tra le schede.

GitHub

/ Strumenti

■

/ Cerca strumento

109 strumenti

/ Generatore di gradienti

Tipo di gradiente

Angolo: 90°

0°90°180°270°360°

Punti di colore

100%

Anteprima del gradiente

Codice CSS

Valore della proprietà CSS

Immagine di sfondo

/ Strumento selezionato

■

Generatore di gradienti - strumento generatore gratuito

Crea bellissimi gradienti CSS con molteplici punti di colore

■ 01

Cosa sono i gradienti CSS?

I gradienti CSS creano transizioni fluide tra due o più colori. Possono essere usati come sfondi, bordi e altre proprietà. I gradienti vengono renderizzati dal browser e si scalano perfettamente senza pixelizzazione.

■ 02

Come funziona?

I gradienti funzionano definendo punti di colore (color stop) in posizioni specifiche lungo un percorso. I gradienti lineari fanno transitare i colori lungo una linea retta a un angolo specificato, mentre quelli radiali passano da un punto centrale verso l'esterno in…

■ 03

Casi di esempio

Copre gradiente lineare, gradiente radiale e gradiente a più stop, così puoi confrontare rapidamente input e output comuni.

/ Strumenti correlati

/ Codice

■

Codice sorgente dello strumento selezionato, mostrato qui accanto alla versione live sulla destra.

/ Codice sorgente

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {