Generatore di gradienti CSS
Local only — nothing is uploaded unless you save or share it.
Un generatore di gradienti CSS per lineare, radiale e conico — il codice si copia direttamente.
- Scegli la specie di gradiente, e l'angolo se ne ha uno
- Imposta i tuoi colori — aggiungi fermate o posizionale a mano
- Copia il CSS
Salva questo strumento
Tieni Generatore di gradienti CSS a portata di mano
Usa il menu Condividi del browser, poi «Aggiungi a Home».
Su questo strumento
Un gradiente è una di quelle cose più veloci da costruire a occhio che da scrivere a mano, perché il numero che vuoi è raramente quello che indovini per primo. Qui il risultato si vede mentre lo cambi e il CSS ti viene consegnato sotto. Ci sono tutte e tre le specie: lineare per la solita sfumatura da sinistra a destra o dall'alto in basso, radiale per un bagliore che si allarga dal centro, e conico per la spazzata attorno a un punto di cui sono fatte le ruote dei colori e i grafici a torta. Puoi aggiungere tutte le fermate di colore che vuoi e posizionarle una per una, oppure lasciare le posizioni vuote e far spaziare le fermate al browser in modo uniforme, che è quello che serve quasi sempre e tiene il valore abbastanza corto da poterlo modificare dopo. La modalità ripetuta trasforma uno qualsiasi di essi in un motivo che si affianca, ed è così che si fanno le righe in CSS senza una sola immagine. Ogni colore che scrivi viene interpretato e riscritto invece di essere copiato di peso, così il valore che finisce negli appunti è un colore e nient'altro. Lo strumento funziona interamente nel tuo browser.
Domande frequenti
Che differenza c'è fra lineare, radiale e conico?
Il lineare sfuma lungo una linea retta, ed è quello che intende quasi tutti. Il radiale si allarga verso l'esterno da un punto come un bagliore. Il conico gira attorno a un punto invece di allontanarsene, ed è ciò che rende possibili le ruote dei colori e gli spicchi di un grafico a torta in puro CSS.
Devo impostare le posizioni delle fermate?
Di solito no. Lasciate vuote, il browser spazia le fermate in modo uniforme, che è quello che serve nella maggior parte dei casi e tiene il CSS corto e facile da modificare più avanti. Impostale a mano quando vuoi che un colore duri più a lungo, o quando vuoi un bordo netto fra due di essi.
Come faccio una riga netta invece di una sfumatura?
Dai a due fermate la stessa posizione. Un gradiente che va da un colore al 50 per cento a un altro sempre al 50 per cento cambia di colpo invece di mescolarsi. Unisci questo alla modalità ripetuta e hai le righe senza alcun file immagine.
Perché il mio colore è tornato come codice esadecimale?
Ogni colore viene interpretato e riscritto invece di passare così com'è. Questo mantiene l'output un colore valido e nient'altro, cosa che conta perché il valore finisce in un foglio di stile. Un colore che non si può capire viene rifiutato invece che incluso in silenzio.
I gradienti funzionano in tutti i browser?
Lineare e radiale funzionano ovunque da molti anni. Il conico è più recente ma è supportato da tutti i browser attuali. Se devi supportare qualcosa di molto vecchio, il generatore mostra anche un colore pieno che puoi dichiarare prima come ripiego.
Aiutaci a migliorare questo strumento
Hai trovato un errore, vuoi una modifica, o ti manca uno strumento?
Hai un messaggio non inviato.
Grazie — è arrivato. Troverai la risposta nella tua casella.Go to my messages