Generatore di gradienti CSS
Colori da una parte, una dichiarazione dall’altra.
Risultato
Incolla o scrivi qui sopra per vedere il risultato.
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Ciò che incolli viene elaborato sul tuo dispositivo e non viene mai inviato a un server, quindi puoi usarlo in sicurezza con token, chiavi e testi non pubblicati.
Come funziona
- Un colore per riga. Va bene qualsiasi colore CSS: hex, rgb(), hsl(), un nome di colore.
- Aggiungi una posizione dopo un colore per fissarlo: «#000 80%».
- Scegli lineare, radiale o conico, e l’angolo o il centro.
- Copia la dichiarazione.
Domande frequenti
- Perché prima c’è un colore pieno?
- È la riserva. Tutto ciò che non sa leggere il gradiente — un browser vecchio, un programma di posta, un motore PDF — prende la prima dichiarazione e ignora la seconda. Senza, quei lettori non ottengono alcuno sfondo.
- Dove punta 180deg?
- In basso. In CSS 0deg punta in alto e l’angolo gira in senso orario, al contrario della vecchia sintassi -webkit- e della maggior parte degli strumenti di progettazione. È la cosa che qui si sbaglia al contrario più spesso.
- Perché testo e non una tela da trascinare?
- Perché una tela non si incolla in una revisione di codice. Qui l’uscita è una dichiarazione: confrontabile, versionabile e leggibile dalla prossima persona che aprirà il file.
- Viene inviato qualcosa a un server?
- No. Gira nel browser: quello che incolli resta sul tuo computer.
Strumenti correlati
◒ Generatore di box-shadow CSS La dichiarazione, non una tela da trascinare. ◒ Convertitore di colore HEX, RGB, HSL e CMYK — più il rapporto di contrasto che decide la leggibilità. ◐ Verifica del contrasto Se qualcuno riesce davvero a leggerlo. ◒ Formattatore CSS Una dichiarazione per riga — o l’intero file su una sola.