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.
Che cos’è una sfumatura CSS
Una sfumatura CSS è un modo di disegnare una fascia o una macchia raggiante di due o più colori che trapassano l’uno nell’altro, servendosi del solo foglio di stile e di nessuna immagine. linear-gradient() sposta i colori in linea retta secondo l’angolo che lei indica; radial-gradient() li diffonde da un centro in cerchi. Scritta come testo resta leggera, non diventa grossolana ingrandendosi, e mutare un colore si riduce a mutare un valore.
Questo strumento le consente di regolare tipo, angolo e fermate di colore sullo schermo, seguire il risultato via via e copiare il CSS finito così com’è. Può porre fino a sei fermate, ciascuna col proprio colore e la propria posizione in percentuale; meno di due non formano alcuna sfumatura e provocano un avviso. Noti che il CSS misura l’angolo a suo modo: 0deg va dal basso verso l’alto e 90deg da sinistra verso destra, sicché lo zero punta altrove che nella matematica consueta. La sfumatura radiale non ha nozione di angolo, perciò quella regolazione non la tocca.
Come si costruisce una sfumatura CSS
- Scelga il tipo Prenda lineare se vuole che i colori si spostino in linea retta, radiale se vuole che si diffondano da un centro.
- Fissi l’angolo Vale soltanto per il tipo lineare. 0deg va dal basso verso l’alto e 90deg da sinistra verso destra, crescendo in senso orario. Muova il cursore e veda la direzione assestarsi.
- Ponga le fermate di colore «Aggiungi un colore» la porta fino a sei. Dia a ciascuna fermata un colore e una posizione in percentuale e governerà con precisione dove un colore ceda al successivo.
- Controlli l’anteprima L’anteprima si ridisegna a ogni cambiamento, sicché può giudicare all’istante se un confine risulti troppo brusco o se la direzione sia quella voluta.
-
Copi il CSS
«Copia CSS» lo porta negli appunti, pronto da incollare nel
backgrounddel suo foglio di stile.
Consigli per sfruttarlo al meglio
- 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.
Dove le sfumature CSS sono utili
Dare rilievo a un pulsante o a un contrassegno
Una sfumatura lineare che scurisce lievemente dall’alto in basso fa apparire un comando più premibile di una tinta piatta. A tenerla naturale è il divario ridotto fra i colori.
Comporre uno sfondo di testata
Stenda una sfumatura di due o più colori sull’ampia fascia in cima alla pagina e avrà uno sfondo d’effetto senza caricare una sola immagine, e senza rallentarla.
Un effetto da riflettore
Una sfumatura radiale chiara al centro e scura ai bordi si legge come luce che cade sulla superficie.
Porre del testo sopra una fotografia
Sovrapponga una sfumatura lineare che vada dal nero semitrasparente al trasparente pieno e il testo resterà leggibile anche sulle parti chiare dell’immagine.
Quando ciò che fissa sono i colori
Nello scegliere che cosa porre a ciascuna fermata usi il convertitore di codici colore; per ragionare sugli accostamenti, la tavolozza di colori.
Termini sulle sfumature CSS
- linear-gradient
- La funzione CSS che disegna una sfumatura i cui colori si spostano in linea retta secondo un angolo dato. Si addice a sfondi a fascia e al riempimento di un pulsante.
- radial-gradient
- La funzione CSS che disegna una sfumatura che si diffonde da un centro in cerchi o ellissi. Non ha nozione di angolo.
- Fermata di colore
- Indicazione che colloca un determinato colore in un determinato punto della sfumatura. La posizione si dà in percentuale, con l’inizio allo 0 % e la fine al 100 %.
- Angolo (deg)
- La direzione in cui viaggiano i colori di una sfumatura lineare. Nel CSS 0deg va dal basso verso l’alto e 90deg da sinistra verso destra, crescendo in senso orario: lo zero punta altrove che nella matematica consueta.
- Prefisso del produttore
- Un prefisso come
-webkit-, apposto quando ogni browser offriva a modo proprio una novità prima della normalizzazione. Le sfumature sono da tempo normalizzate: nessun prefisso occorre. - La proprietà background
- La proprietà CSS che fissa lo sfondo di un elemento. Una sfumatura vale come una specie di immagine di sfondo, ed è per questo che si scrive qui.
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.