Generatore di gradienti CSS

Una sfumatura regolata a occhio e il codice CSS pronto da incollare

Questo generatore di gradienti mostra la sfumatura in grande e scrive il codice CSS mentre regoli. Scegli il tipo («Lineare», «Radiale» o «Conico»), l'angolo e da 2 a 8 punti di colore, ciascuno con la sua posizione e la sua opacità. Tutto è calcolato nel browser, utile per l'intestazione di un sito, un pulsante o la locandina di una sagra senza aprire un programma di grafica.

Come creare un gradiente CSS

1. Scegli il tipo. Nel lineare, sposta il cursore «Angolo» o clicca una freccia di «Direzione». Nel radiale, scegli la «Forma» (cerchio o ellisse) e la posizione del centro.
2. In «Punti di colore», clicca sulla barra per aggiungere un punto e trascina una maniglia per spostarlo, con il mouse o con il dito. Ogni riga regola il colore (selettore o codice HEX), la «Posizione %» e l'«Opacità %». Il pulsante × toglie il punto, «Inverti l'ordine» capovolge la sfumatura.
3. In «Codice CSS», scegli il formato: background, background-image, «Classe di utilità» o «SVG» (solo nel lineare), poi clicca «Copia il codice».
4. «Scarica il PNG» salva un'immagine da 1920 × 1080 px se non cambi nulla, fino a 8000 px per lato.

«Gradiente casuale» (o la barra spaziatrice) estrae 2 o 3 colori dalle tinte vicine oppure opposte, e la galleria propone 16 modelli. «Salva questo gradiente» ne conserva fino a 12 sul tuo dispositivo; oltre, bisogna eliminarne uno. L'indirizzo della pagina segue ogni regolazione: copialo per condividere la sfumatura.

La sintassi dei gradienti CSS

Clicca «Notte blu» nella galleria e lo strumento scrive:

background: #0b1437;

background: linear-gradient(180deg, #0b1437 0%, #25508f 100%);

La prima riga è un colore pieno di riserva. La seconda disegna la sfumatura: un angolo, poi i punti, ciascuno fatto di un colore e di una posizione. Per gli angoli, 0deg va verso l'alto, 90deg verso destra, 180deg verso il basso. Le parole chiave dicono la stessa cosa: to right vale 90deg, to bottom vale 180deg.

• radial-gradient(circle at 50% 50%, #fff3b0 0%, #7a1f3d 100%) parte da un centro e si allarga a cerchio fino all'angolo più lontano.
• conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%) gira attorno al centro partendo dall'alto.
• Un'opacità sotto 100 trasforma il colore in rgba: #25508f al 60 % diventa rgba(37, 80, 143, 0.6).

Bande nette. Due punti nella stessa posizione eliminano la transizione. linear-gradient(90deg, #2b1b5a 0%, #2b1b5a 50%, #ffd3a5 50%, #ffd3a5 100%) dà due metà piatte con un taglio netto.

Consigli per una bella sfumatura

• Tinte vicine per un effetto morbido. Due colori vicini sul cerchio cromatico, come due blu di luminosità diversa, si fondono senza macchie.
• Attenzione al grigio tra due complementari. Tra il rosso #ff0000 e il ciano #00ffff, il centro della sfumatura cade su un grigio medio, vicino a #808080. Aggiungi un punto intermedio colorato: il modello «Da corallo a turchese» passa per un giallo sabbia al 50 %.
• Controlla la leggibilità. Lo strumento indica il contrasto WCAG di un testo bianco e di uno nero sui due colori estremi. Su «Notte blu» il bianco ottiene 17,95:1 in alto e 8,00:1 in basso («AA superato» in entrambi i casi, la soglia è 4,5:1), mentre il nero si ferma a 1,16:1 e 2,62:1. Qui il testo bianco funziona su tutta l'altezza.
• Meglio il CSS di un'immagine. Una riga di codice pesa poche decine di byte e resta nitida su ogni schermo. Tieni il PNG per le presentazioni o gli sfondi.

Tutte e tre le funzioni si usano in tutti i browser attuali senza prefisso.

Domande frequenti

Che differenza c'è tra background e background-image?

background è una proprietà abbreviata che azzera le altre impostazioni dello sfondo. background-image tocca solo l'immagine. In questo formato lo strumento scrive la riga background-color solo quando tutti i punti sono opachi, perché si vedrebbe attraverso un gradiente trasparente.

Come si mette un gradiente su un testo?

Applica il gradiente come sfondo del testo, poi aggiungi background-clip: text e color: transparent. L'anteprima «Testo sfumato» mostra il risultato con i tuoi colori.

Come si fa una sfumatura verso il trasparente?

Dai lo stesso colore a due punti e porta a 0 l'opacità di uno. Il modello «Velo scuro» va così da 0 a 85 %: sopra una foto rende leggibile un titolo bianco.

I miei gradienti salvati vengono inviati da qualche parte?

No. Restano nella memoria del browser, su questo dispositivo. Per ritrovare un gradiente altrove, copia l'indirizzo della pagina.