Generatore di gradienti CSS

Dai punti colore al codice: il generatore di gradienti CSS

All’apertura trovi già un gradiente a tre colori e il suo codice nelle due caselle di risultato. Ogni modifica le aggiorna subito. Il generatore di gradienti CSS scrive linear-gradient(), radial-gradient() o conic-gradient(), con il prefisso repeating- se attivi la ripetizione.

Costruire un gradiente in cinque mosse

1. Scegli Lineare, Radiale o Conico. Il lineare chiede un angolo da 0 a 360 gradi, il radiale cerchio o ellisse e un centro, il conico un angolo iniziale e un centro.
2. Modifica i punti colore: selettore, campo esadecimale, posizione in percentuale e alfa da 0 a 100.
3. Le frecce spostano un punto, la croce lo toglie, Aggiungi punto ne mette uno in fondo.
4. Prova Distribuisci in modo uniforme oppure Inverti i punti. Sei preimpostazioni riempiono tutto l’editor.
5. Premi Copia sulla casella che ti serve.

Spigoli netti e punti fuori ordine

Due punti sulla stessa posizione non sfumano: tagliano. La preimpostazione Strisce lo sfrutta, con fasce del 10 % che si ripetono perché l’ultimo punto sta al 20 %.

Lo strumento non riordina mai i punti. Se uno sta prima di uno precedente, il browser lo porta sulla posizione di quello precedente. Le posizioni sono limitate a 0–100.

Che cosa finisce nelle due caselle

La prima contiene una riga, background: ...;. La seconda ne contiene due: background-color uguale al primo punto, come riserva, e background-image con il gradiente. I colori pieni sono scritti come #rrggbb. Con alfa sotto 100 diventano rgb(0 0 255 / 50%). Nei gradienti radiali e conici il centro è scritto at 50% 50% e la dimensione non è indicata, quindi vale farthest-corner.

Limiti, e dove restano i tuoi dati

Accetta solo colori esadecimali (#rgb o #rrggbb), non nomi né hsl(). C’è un solo livello di gradiente, senza punti medi e senza dimensione radiale personalizzata. Tutto avviene nel browser: modificando o copiando non parte alcuna richiesta, nulla viene salvato e ricaricando torna il gradiente iniziale. Copia scrive negli appunti; non c’è un download.

Domande frequenti (FAQ)