Vai al contenuto

Generatore Gradienti

Crea bellissimi gradienti CSS visualmente. Scegli lineare o radiale, aggiungi color stop, regola angoli, anteprima live e copia il CSS.

Posizione: 0%
Posizione: 100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -o-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Generatore di Gradienti CSS: Crea Gradienti Bellissimi Istantaneamente

I gradienti CSS permettono di visualizzare transizioni fluide tra due o più colori senza bisogno di file immagine. Riducono le richieste HTTP, si ridimensionano perfettamente su qualsiasi risoluzione e possono essere modificati con una singola riga di codice. Il nostro generatore rende la creazione di questi effetti semplicissima con un'interfaccia visiva e anteprima in tempo reale.

Lo strumento supporta sia gradienti lineari che radiali. I gradienti lineari trasformano i colori lungo una linea retta definita da un angolo, mentre quelli radiali diffondono i colori verso l'esterno da un punto centrale. Puoi aggiungere fino a otto fermate colore, regolare le posizioni e perfezionare l'angolo da 0 a 360 gradi.

Una volta soddisfatto dell'anteprima, lo strumento genera codice CSS pulito pronto per essere incollato nel tuo foglio di stile. Fornisce anche versioni con prefissi vendor per la massima compatibilità tra browser, inclusi i prefissi -webkit-, -moz- e -o-.

Designer e sviluppatori usano comunemente sfondi gradienti per sezioni hero, pulsanti, overlay su card e barre di navigazione. Combinando più fermate colore in posizioni specifiche, puoi creare miscele complesse, pattern a strisce o sottili variazioni che aggiungono profondità a qualsiasi pagina web.

FAQ

Condividi
SponsorizzatoAnnuncio

Design professionale reso facile con Canva

Crea loghi, post social, presentazioni e altro con la semplicità del drag-and-drop.

FAQ

Qual è la differenza tra gradiente lineare e radiale?+
Un gradiente lineare trasforma i colori lungo una linea retta con un angolo specificato. Uno radiale li trasforma verso l'esterno da un punto centrale in forma circolare. Entrambi possono avere più fermate colore.
Quante fermate colore posso aggiungere?+
Puoi aggiungere fino a 8 fermate colore. CSS non ha un limite rigido, ma per scopi pratici di design, 8 fermate offrono sufficiente flessibilità per effetti gradienti complessi.
Servono ancora i prefissi vendor per i gradienti CSS?+
I browser moderni supportano la sintassi standard senza prefissi. Tuttavia, per browser più vecchi, la versione con prefissi assicura la compatibilità. Lo strumento fornisce entrambe le opzioni.
Posso usare il CSS generato in qualsiasi framework?+
Sì. L'output è CSS standard che funziona in HTML, React, Vue, Angular o qualsiasi altro framework. In React con stili inline, useresti il valore del gradiente nella proprietà background.
L'anteprima è esattamente ciò che vedrò sul mio sito?+
Sì. L'anteprima usa lo stesso CSS generato, quindi ciò che vedi nella casella di anteprima è esattamente ciò che verrà visualizzato in qualsiasi browser moderno.

Strumenti più popolari