Generatore di gradient CSS
Crea gradienti CSS lineari, radiali e conici nel tuo browser.
Il colore si ferma
Utilizzare le maniche di fermo o i tasti per modificare posizioni. Ogni fermo include un colore esplicito, opacità e percentuale.
Il browser nativo di elaborazione locale
Il tuo gradient rimane in questo browser. nessun colore o CSS generato viene inviato a Converter.
Grammatica limitata di importazione
L'importazione accetta gradient lineare(), radiale-gradient(), o conico-gradent() con colori e percentuali hex. Dichiarazioni, URL, variabili e funzioni sconosciute vengono respinte localmente.
Il fallback accessibile
Il CSS generato include un solido back-back di colore di sfondo accanto al gradiente per rendering non supportati e cromo di controllo accessibile.
Domande frequenti
Il mio gradient è stato caricato?
No. stato graduale, colori, CSS importati e generato CSS rimane nel tuo browser.
Quali tipi di gradienti CSS sono supportati?
Il generatore crea una produzione lineare-gradiente(), radiale-gradente() e conico-graduente().
Cosa posso importare?
L'importazione accetta un grammatico deliberatamente limitato utilizzando una funzione gradiente supportata, colori hex, percentuali facoltativi e valori di angolo o posizione limitati.
Sviluppatore e strumenti di design correlati
Generatore di gradient CSS
Costruisci gradienti CSS lineari o radiali e preview color stop, angolo, posizione e ripetizione.
- Introduzione
- Tipo gradiente, stop di colore, posizioni, angolo e impostazioni ripetute.
- 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 l'output non valuta il contrasto o garantisce il supporto nei browser ereditari.
- Privacy e trattamento dei dati
- Il tipo di gradient, i colori si fermeranno, le posizioni, l'angolo e le impostazioni ripetute vengono elaborate in questa scheda del browser. il convertitore non riceve o lo memorizza; chiudere o ricaricare la pagina chiude lo stato di lavoro a meno che l'outil non fornisca esplicitamente una download locale.
Come utilizzare questo strumento
- Fornire tipo gradiente, stop di colore, posizioni, angolo e ripetere impostazioni nei controlli degli strumenti.
- Scegli le impostazioni che influenzano una visualizzazione in diretta e la dichiarazione di sfondo CSS copiabile, quindi eseguire l'output.
- Verifica una preview dal vivo e una dichiarazione di sfondo CSS copiabile prima di copiare o scaricarla.
Modalità comuni di fallimento
Una mancanza di colorazione, colore invalido o posizione incompatibile impedisce che una dichiarazione CSS valida venga costruita.
Un esempio utile
Crea un gradiente lineare di 90 gradi da #111827 a 0% a #f59e0b a 100% e copia la dichiarazione.