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

Supporta questo progetto

Se trovi utili i nostri strumenti, offrici un caffè!

Buy Me a Coffee

Strumenti più popolari