Generator de gradient CSS
Creați gradiente CSS lineare, radiale și conice în browser-ul dvs.
Opriri de culoare
Folosește mânerele de oprire sau săgețile de la tastatură pentru a edita pozițiile. Fiecare oprire include o culoare explicită, opacitate și procentaj.
Procesare locală nativă în browser
Gradientul tău rămâne în acest browser. Nu sunt trimise culori sau CSS generate către Convertr.
Gramatică de import limitată
Importul acceptă linear-gradient(), radial-gradient() sau conic-gradient() cu culori hex și procente. Declarațiile, URL-urile, variabilele și funcțiile necunoscute sunt respinse local.
Culoare de fundal de rezervă accesibilă
CSS generat include un fundal solid de culoare de rezervă, alături de gradient pentru procesoarele nesuportate și pentru controlul accesibil al chrome-ului.
Întrebări frecvente
A fost încărcat gradientul meu?
Starea gradientului, culorile, CSS importat și CSS generat rămân în browser-ul tău.
Ce tipuri de gradient CSS sunt suportate?
Generatorul creează ieșire linear-gradient(), radial-gradient() și conic-gradient() cu multiple opriri de culoare hex.
Ce pot importa?
Importul acceptă o gramatică deliberat limitată, folosind o funcție de gradient acceptată, culori hex, procente opționale și valori de unghi sau poziție limitate.
Instrumente de dezvoltare și design conexe
Generator de gradient CSS
Construiți gradiente CSS lineare sau radiale și previzionați stopurile de culoare, unghiul, poziția și repetarea.
- Intrare
- Tip de gradient, opriri de culoare, poziții, unghi și setări de repetare.
- Ieșire
- O imagine de referință și o declarație de fundal CSS copiabilă.
- Limitări reale
- Randarea browserului poate diferi ușor în funcție de motor, iar instrumentul nu evaluează contrastul sau nu garantează suportul în browserele vechi.
- Confidențialitatea și gestionarea datelor
- tipul de gradient, punctele de culoare, pozițiile, unghiul și setările de repetare sunt procesate în această filă de browser. Convertr nu le primește sau stochează; închiderea sau reîncărcarea paginii șterge starea de lucru, cu excepția cazului în care instrumentul oferă explicit o descărcare locală.
Cum să utilizați acest instrument
- Furnizează tipul de gradient, punctele de culoare, pozițiile, unghiul și setările de repetare în controalele instrumentului.
- Alegeți setările care afectează o preview live și o declarație de fundal CSS copiabilă, apoi rulați instrumentul.
- Revizuiți o previzualizare live și o declarație de fundal CSS copiabilă înainte de a o copia sau descărca.
Moduri comune de eșec
O oprire de culoare lipsă, o culoare invalidă sau o poziție incompatibilă împiedică construirea unei declarații CSS valide.
Exemplu util
Creează un gradient liniar de 90 de grade de la #111827 la 0% la #f59e0b la 100% și copiază declarația.