Immagine
100% nel tuo browser
Generatore di Gradienti CSS — Gradienti Lineari e Radiali
Crea bellissimi gradienti CSS visivamente. Gradienti lineari, radiali e conici con più punti di colore, angolo regolabile, anteprima dal vivo e codice da copiare.
90deg
Punti di colore
Codice CSS
Generatore di Gradienti CSS — Progetta Gradienti Visivamente
Crea splendidi gradienti CSS con un editor visivo dal vivo. Aggiungi quanti punti di colore vuoi, scegli gradienti lineari, radiali o conici, regola l’angolo e copia il codice CSS pronto all’uso. Perfetto per sfondi, pulsanti, schede e sezioni hero.
Tipi di gradiente
- Lineare: i colori si fondono lungo una linea retta a qualsiasi angolo (0–360°)
- Radiale: i colori si irradiano dal centro, come cerchio o ellisse
- Conico: i colori ruotano attorno a un punto centrale (ideale per ruote di colori ed effetti a torta)
Funzionalità
- Punti di colore illimitati: aggiungi o rimuovi colori liberamente
- Controllo posizione: fai scorrere ogni colore da 0% a 100%
- Controllo angolo: ruota i gradienti lineari e conici con precisione
- Anteprima dal vivo: guarda il tuo gradiente aggiornarsi all’istante
- Pulsante casuale: genera una nuova combinazione di colori per ispirarti
- Output CSS pulito: copia una singola riga pronta da incollare
Come usare il CSS
Copia il codice generato e applicalo a qualsiasi elemento. Per esempio:
.hero {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}Consigli
- Due o tre colori spesso appaiono più puliti di molti
- Per sfondi delicati, usa colori vicini sulla ruota dei colori
- Per effetti vivaci, usa colori complementari
- I gradienti conici sono perfetti per spinner di caricamento e selettori di colore
Privacy
Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.