Generatore di gradienti CSS
Crea gradienti CSS lineari, radiali e conici nel tuo browser.
Stop di colore
Utilizza le maniglie di stop o i tasti freccia per modificare le posizioni. Ogni stop include un colore esplicito, opacità e percentuale.
Elaborazione locale nativa del browser
Il tuo gradient rimane in questo browser. nessun colore o CSS generato viene inviato a Convertr.
Grammatica limitata di importazione
L'importazione accetta linear-gradient(), radial-gradient() o conic-gradient() con colori esadecimali e percentuali. Dichiarazioni, URL, variabili e funzioni sconosciute vengono respinte localmente.
Fallback accessibile
Il CSS generato include un solido colore di sfondo di riserva accanto al gradiente per renderer non supportati e cromo di controllo accessibile.
Domande frequenti
Il mio gradiente è stato caricato?
No. Lo stato del gradiente, i colori, il CSS importato e il CSS generato rimangono nel tuo browser.
Quali tipi di gradienti CSS sono supportati?
Il generatore crea output linear-gradient(), radial-gradient() e conic-gradient() con più stop di colore esadecimali.
Cosa posso importare?
L'importazione accetta una grammatica deliberatamente limitata che utilizza una funzione gradiente supportata, colori esadecimali, percentuali opzionali e valori di angolo o posizione limitati.
Strumenti di sviluppo e design correlati
Generatore di gradienti CSS
Costruisci gradienti CSS lineari o radiali e visualizza in anteprima i color stop, l'angolo, la posizione e la ripetizione.
- Introduzione
- Tipo gradiente, arresti di colore, posizioni, angolo e impostazioni di ripetizione.
- Formato di uscita
- Una visualizzazione in diretta e una dichiarazione di sfondo CSS copiabile.
- Le limitazioni reali
- Il rendering del browser può differire leggermente per motore, e lo strumento non valuta il contrasto né garantisce il supporto nei browser legacy.
- Privacy e trattamento dei dati
- Il tipo di gradiente, i color stop, le posizioni, l'angolo e le impostazioni di ripetizione vengono elaborati in questa scheda del browser. Convertr non lo riceve né lo memorizza; chiudere o ricaricare la pagina cancella lo stato di lavoro a meno che lo strumento non offra esplicitamente un download locale.
Come utilizzare questo strumento
- Fornisci tipo di gradiente, color stop, posizioni, angolo e impostazioni di ripetizione nei controlli dello strumento.
- Scegli le impostazioni che influenzano un'anteprima dal vivo e una dichiarazione di sfondo CSS copiabile, quindi esegui lo strumento.
- Verifica un'anteprima dal vivo e una dichiarazione di sfondo CSS copiabile prima di copiarla o scaricarla.
Modalità di errore comuni
Una fermata di colore mancante, un colore non valido o una posizione incompatibile impedisce la costruzione di una dichiarazione CSS valida.
Un esempio utile
Crea un gradiente lineare di 90 gradi da #111827 a 0% a #f59e0b a 100% e copia la dichiarazione.