Generatore di gradienti CSS
Costruisci un gradiente CSS di sfondo in modo visuale: scegli i colori, spostane le posizioni, imposta l'angolo e copia il CSS per il tuo foglio di stile.
Non servono dati
Come si usa
- Scegli lineare, radiale o conico.
- Scegli i colori e trascinane le posizioni.
- Imposta l'angolo.
- Copia il CSS.
Come funziona
Lo strumento scrive le funzioni gradiente standard del CSS, supportate da tutti i browser moderni: linear-gradient(angolo, colore posizione, …), radial-gradient(…) e conic-gradient(from angolo, …). I punti di colore sono ordinati per posizione, così l'output è sempre valido.
Per un testo leggibile su un gradiente, controlla il contrasto del colore del testo sia con la parte più chiara sia con quella più scura.
Esempi
- Sfondo di una sezione hero
- linear-gradient(135deg, #0d6e63 0%, #3cc3b0 55%, #f5d76e 100%)
Usi comuni
- Sezioni hero e pulsanti
- Sfondi e schede
- Prototipare idee di colore
Privacy e sicurezza
Questo strumento non richiede nessun dato personale e nessun file. I risultati vengono generati sul tuo dispositivo. Come ogni strumento tratta i file
Domande frequenti
Servono i prefissi dei fornitori?
No. I gradienti senza prefisso sono supportati da tutti i principali browser da anni.
Posso usare la trasparenza?
Sì: dopo aver copiato il CSS, modificalo per usare rgba() o colori esadecimali a 8 cifre.
Ultimo aggiornamento: