ESC

Controlli Gradiente

135°

Anteprima dal Vivo

Output CSS

Tutta l'elaborazione avviene nel tuo browser. Nessun dato viene inviato a nessun server.

Esempi di Utilizzo

Gradiente Caldo

Un bellissimo gradiente caldo che transita dall'arancione dell'alba al rosa del tramonto.

Gradiente Oceano

Un gradiente fresco ispirato all'oceano dal blu profondo al turchese.

Bagliore Radiale

Un gradiente radiale che crea un effetto riflettore o bagliore dal centro.

Funzionalita

Piu Tipi di Gradiente

Crea gradienti lineari, radiali e conici con pieno controllo su direzione e posizione

Anteprima Visiva dal Vivo

Vedi il gradiente aggiornarsi in tempo reale mentre regoli colori, fermate, angoli e posizioni

Piu Fermate Colore

Aggiungi fermate colore illimitate con controllo posizione per gradienti complessi e bellissimi

Privacy Prima di Tutto

Tutto funziona nel tuo browser — nessun dato viene inviato a nessun server

Come Usare?

1

Scegli Tipo e Colori

Seleziona un tipo di gradiente (lineare, radiale, conico) e aggiungi fermate colore con il selettore.

2

Regola la Direzione

Usa il cursore dell'angolo per gradienti lineari o i controlli di posizione per tipi radiali e conici.

3

Copia il CSS

Clicca il pulsante Copia CSS per copiare il codice gradiente generato negli appunti.

Domande Frequenti

I gradienti lineari fanno transitare i colori lungo una linea retta a un angolo specificato. I gradienti radiali si espandono verso l'esterno da un punto centrale in forma circolare o ellittica. I gradienti conici ruotano i colori attorno a un punto centrale come una ruota cromatica o un grafico a torta. Tutti e tre generano CSS standard che funziona in tutti i browser moderni.

Usa il cursore angolo (0-360 gradi). 0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso, 270deg da destra a sinistra. Il CSS generato usa il valore in gradi (es. "linear-gradient(135deg, ...)") compatibile con tutti i browser moderni.

Una fermata colore e un colore specifico in una posizione specifica (0% a 100%) nel gradiente. Aggiungere una fermata intermedia al 50% permette di controllare il colore del punto medio. Le fermate alla stessa posizione creano un bordo netto — il gradiente passa bruscamente da un colore al successivo invece di fare una transizione.

Posiziona due fermate colore consecutive alla stessa posizione. Ad esempio: fermata rossa al 50% e fermata blu sempre al 50%. Il gradiente mostrera rosso solido da 0% a 50%, poi blu solido da 50% a 100%, senza transizione morbida. Usato per sfondi a strisce e design simili a bandiere.

Si. Usa valori rgba o hsla con canale alfa. Ad esempio, rgba(255, 0, 0, 0) e rosso trasparente e rgba(255, 0, 0, 1) e rosso solido. Un gradiente da trasparente a solido crea sovrapposizioni in dissolvenza e gradienti trasparenti per sezioni hero.

Si. I gradienti lineari, radiali e conici sono supportati in tutti i browser moderni (Chrome, Firefox, Safari, Edge). I gradienti conici hanno un supporto browser leggermente piu recente ma sono ben supportati dal 2020. Il CSS usa sintassi standard senza prefissi -webkit- poiche non sono piu necessari.

Alba: lineare caldo arancione verso rosa. Oceano: lineare blu profondo verso turchese. Foresta: verde verso verde scuro. Tramonto: diagonale viola verso arancione. Neon: ciano vivace verso magenta. Pastello: rosa tenue verso lavanda. I preimpostati sono punti di partenza — modifica colori e angoli dopo il caricamento.

No. Tutto funziona localmente nel tuo browser. I tuoi dati sul gradiente non lasciano mai il tuo dispositivo.

Cos'e un generatore di gradienti CSS?

Un generatore di gradienti CSS ti permette di progettare visivamente sfondi con gradiente senza memorizzare la sintassi. Scegli il tipo (lineare, radiale o conico), aggiungi fermate colore, regola angolo o posizione, e lo strumento genera CSS pulito pronto da incollare nel tuo progetto.

Funzionalita principali

Tutti e tre i tipi di gradiente CSS in un unico strumento. Fermate colore illimitate con trascinamento. Un cursore angolo per i lineari e controlli posizione per radiali e conici. Preset belli per iniziare subito. Il CSS generato include i prefissi -webkit per browser piu vecchi.

Casi d'uso comuni

Sfondi hero, stati hover dei pulsanti, overlay su card e bordi decorativi. I gradienti radiali funzionano bene per effetti spotlight, quelli conici sono perfetti per ruote di colore o grafici a torta.

Consigli

Resta su 2-3 colori per design puliti. Colori analoghi (vicini sulla ruota cromatica) danno transizioni morbide. Per uno sfondo sottile, prova un gradiente tra due tonalita molto simili. Controlla sempre il gradiente su sfondi chiari e scuri.

Privacy

Funziona interamente nel tuo browser. Nessun colore, nessuna impostazione, niente viene caricato da nessuna parte.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura

Passo Successivo

Anche su MoreOnlineTools