Generatore di gradienti CSS
Strumento gratuito che, indicando due o più punti di colore, genera il codice CSS di linear-gradient e radial-gradient con anteprima in tempo reale. Angolo e posizioni sono liberamente regolabili e il codice si copia con un clic.
Consigli per l'uso
- Si possono aggiungere fino a sei punti di colore, regolando liberamente tinta e posizione (%) per costruire anche gradienti complessi.
- Nel gradiente lineare, 0° fa variare il colore dal basso verso l'alto e 90° da sinistra verso destra. Il cursore permette di regolarlo a occhio.
- Il gradiente radiale non ha il concetto di angolo: il colore si irradia dal centro verso l'esterno.
- Il codice CSS generato si copia negli appunti con il pulsante «Copia il CSS» e si incolla direttamente nel foglio di stile.
Domande frequenti
A proposito — perché i gradienti CSS hanno sostituito le immagini
Prima dei CSS3, per realizzare uno sfondo sfumato si applicava di norma come immagine di sfondo un PNG o un JPEG preparato con un programma di grafica. Il metodo però portava con sé molti problemi: il rallentamento dovuto al caricamento dell'immagine, il degrado della qualità quando il layout responsivo la ingrandiva e una manutenzione onerosa, dato che bastava cambiare un colore per dover rifare il file.
Quando, nella prima metà degli anni Dieci, i browser hanno implementato la sintassi linear-gradient e radial-gradient dei CSS3, tutti questi problemi sono scomparsi in un colpo solo. Trattandosi di sole istruzioni testuali, il risultato è leggero, non perde qualità con ingrandimenti e riduzioni, e per cambiare colore basta modificare un numero nel foglio di stile.
Nelle prime implementazioni ogni browser aveva il proprio prefisso (-webkit-, -moz-, -o- e altri) e differenze di sintassi, e bisognava scrivere più varianti una dopo l'altra. Con la standardizzazione presso il W3C, oggi la sintassi standard senza prefissi funziona su tutti i browser principali.