Generatore di gradienti CSS
Crea un gradiente CSS lineare, radiale o conico con stop di colore personalizzati e un angolo, visualizza il risultato in anteprima dal vivo e copia la regola background pronta da incollare.
Generatore di gradienti CSS — Scegli un tipo di gradiente, imposta l'angolo e aggiungi tutti gli stop di colore che ti servono, ciascuno con il proprio colore e la propria percentuale di posizione. Un riquadro di anteprima dal vivo si aggiorna mentre modifichi e la regola CSS background pronta da incollare viene mostrata per copiarla con un clic. Tutto viene eseguito interamente nel tuo browser; nessun colore o CSS viene mai inviato a un server.
Cos'è Generatore di gradienti CSS?
Il Generatore di gradienti CSS è uno strumento online gratuito per web designer e sviluppatori front-end che hanno bisogno di un gradiente veloce senza scrivere la sintassi a mano. Scegli un gradiente lineare, radiale o conico, imposta l'angolo in gradi per i tipi lineare e conico e definisci gli stop di colore, ciascuno con un colore HEX e una percentuale di posizione. Mentre modifichi, un'anteprima dal vivo mostra il risultato e la corrispondente regola CSS background si aggiorna all'istante, così puoi copiarla direttamente in un foglio di stile. Usalo per progettare pulsanti, sfondi hero, schede e overlay, oppure per imparare come funzionano le funzioni linear-gradient(), radial-gradient() e conic-gradient().
Come usare Generatore di gradienti CSS
- Scegli il tipo di gradiente: Lineare, Radiale o Conico.
- Per un gradiente lineare o conico, imposta l'angolo in gradi (0-360); il radiale usa un cerchio centrato e ignora l'angolo.
- Modifica ogni stop di colore: digita o scegli un colore HEX e imposta la sua posizione come percentuale (0-100).
- Fai clic su Aggiungi stop per inserire un altro colore, o sull'icona del cestino per rimuovere uno stop (vengono mantenuti almeno due stop).
- Osserva il riquadro di anteprima dal vivo aggiornarsi, poi copia la regola CSS background generata con il pulsante di copia.
Esempi
Semplice gradiente lineare a due colori
Input
Lineare, 90deg, #4f86f7 allo 0% e #9333ea al 100%
Output
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
Gradiente radiale a tre stop
Input
Radiale, stop #ffffff 0%, #4f86f7 50%, #1e3a8a 100%
Output
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
Gradiente conico per una ruota dei colori
Cambia il tipo in Conico, imposta l'angolo iniziale e aggiungi diversi stop in posizioni equidistanti per far girare i colori attorno a un punto centrale — utile per campioni in stile grafico a torta o spinner di caricamento.
Domande frequenti
- Quali tipi di gradiente sono supportati?
- Tre: linear-gradient (con un angolo in gradi), radial-gradient (un cerchio centrato) e conic-gradient (con un angolo iniziale). Passa dall'uno all'altro con il selettore di tipo e il CSS si aggiorna all'istante.
- Come funzionano gli stop di colore e le posizioni?
- Ogni stop ha un colore e una percentuale di posizione da 0 a 100. Gli stop vengono scritti nel CSS nell'ordine in cui appaiono nell'elenco, esattamente come li interpreta il browser, quindi controlli l'ordine direttamente. Puoi aggiungere stop con Aggiungi stop e rimuoverli fino a un minimo di due.
- Posso scegliere i colori visivamente invece di digitare l'HEX?
- Sì. Fai clic sul piccolo chip di colore accanto a ogni stop per aprire il selettore di colori nativo del tuo browser, oppure digita un valore HEX come #4f86f7 direttamente nel campo del colore. L'anteprima e il CSS si aggiornano man mano che lo modifichi.
- Perché il campo dell'angolo scompare per i gradienti radiali?
- Qui un gradiente radiale viene disegnato come un cerchio centrato, che non usa un angolo, perciò il campo dell'angolo viene mostrato solo per i tipi lineare e conico, dove cambia la direzione.
- I miei colori o il mio CSS vengono caricati da qualche parte?
- No. Il gradiente è costruito interamente nel tuo browser con calcoli locali di stringhe e colori — nessun colore, CSS o impostazione viene mai inviato a un server, quindi funziona offline e mantiene privato il tuo lavoro.
Strumenti correlati
Codice in immagine
Trasforma uno snippet di codice in un'elegante immagine PNG con evidenziazione della sintassi nel tuo browser, con tema, sfondo a gradiente o trasparente e spaziatura interna — senza alcun caricamento.
Verificatore di contrasto dei colori
Controlla il rapporto di contrasto WCAG tra un colore HEX di primo piano e uno di sfondo e verifica se supera AA e AAA per testo normale e grande.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala di sfumature 50-950 in stile Tailwind, miscelando verso il bianco e il nero, ogni livello con campione e HEX copiabile.