Cos'è un gradiente?
Un gradiente è un insieme di colori che si affiancano secondo specifici criteri al fine di generare un effetto sfumatura (il gradiente viene spesso chiamato, impropriamente, "sfumatura").
Esistono diversi tipi di gradiente, cioè il gradiente lineare, circolare ed ellittico a seconda che il susseguirsi dei colori avvenga seguendo una linea, un cerchio o un ellissi.
I gradienti lineari
Nei gradienti lineari la sfumatura avviene mediante l'accostamento di diverse linee di colore corrispondenti alla sequenza delle gradazioni di passaggio tra il colore iniziale e quello finale. Per fare un esempio banale basti pensare ad un gradiente lineare in cui il nero sfumi in bianco: in un simile gradiente la prima linea sarebbe nera, la seconda di un grigio scurissima, la terza di un grigio scuro e via via schiarendo fino al bianco.
Per una resa ottimale della sfumatura è necessario che:
- la "distanza cromatica" tra i due colori non sia eccessiva;
- oppure sia impostata una certa ampienza della sfumatura (al fine di consentire passaggi graduali dal colore d'inizio a quello finale).
Come creare un gradiente?
I più famosi programmi di grafica (come ad esempio Photoshop o The Gimp) integrano appositi strumenti per tracciare gradienti. In alternativa è possibile utilizzare software grafici ad hoc oppure strumenti on-line come quello disponibile in questa pagina.
Utilizzare un gradiente come background
Attraverso CSS è possibile utilizzare l'immagine gradiente come sfondo per una pagina web o suoi singoli elementi (ad esempio un box).
Le proprietà CSS coinvolte in questa operazione sono molteplici, ovvero:
- background-image()
- background-repeat()
- background-position()
- background-attachment()
In alternativa è possibile utilizzare il gradiente utilizzando la sola proprietà background() in questo modo:
body { background: url(URL_DEL_GRADIENTE) repeat-x; } Per approfondire le tematiche relative alla gestione dello sfondo coi CSS si faccia riferimento a questa lezione delle guida pubblicata su Mr.Webmaster.
Crea il tuo gradiente on-line
Attraverso il nostro tool per la creazione on-line di gradienti è possibile generare in automatico gradienti lineari in direzione verticale.
- selezionare il colore di partenza;
- selezionare il colore di arrivo;
- specifica l'altezza della sfumatura
- clicca sul bottone per generare il gradiente;
- clicca sull'icona di download per scaricare il tuo file PNG.
