Ročno pisanje sintakse za preliv je zoprno: kot, vrstni red postankov in odstotne pozicije se med seboj prepletajo, ena sama tipkarska napaka pa neopazno pokvari celoten background. To orodje drži predogled in kodo popolnoma usklajena - kar vidite, je do zadnjega znaka enako CSS kodi, ki jo kopirate. Vse se izvaja izključno v brskalniku, zato se nič, kar ustvarite, nikamor ne pošilja.
Brezplačni CSS Gradient Generator
Vse poteka v vašem brskalniku - brez nalaganja, brez registracije.
Vrsta
Barvni postanki
CSS koda
Kaj je CSS gradient generator?
CSS gradient generator je vizualno orodje, ki namesto vas sestavi kodo linear-gradient(), radial-gradient() ali conic-gradient(). Izberete barve, povlečete postanke na želeno mesto, nastavite kot - predogled v živo pa takoj pokaže, kar bo brskalnik dejansko izrisal, kodo pa preprosto kopirate. Vse teče v vašem brskalniku.
Kako uporabljati
- 1Izberite vrsto preliva. Izberite linearni, radialni ali konični preliv. Linearni prikaže drsnik za kot, radialni doda obliko (krog ali elipsa) in pozicijo, konični pa začetni kot in pozicijo.
- 2Nastavite barvne postanke. Kliknite vsak vzorec, da izberete barvo, in povlecite njegov drsnik, da postanek premaknete vzdolž preliva. Dodate lahko do 8 postankov ali jih odstranite do najmanj 2.
- 3Prilagodite smer. Povlecite drsnik kota (0-360 stopinj) ali izberite ključno besedo za pozicijo. Predogled se posodobi v živo ob vsaki spremembi.
- 4Kopirajte CSS kodo. Kliknite Kopiraj, da dobite deklaracijo ozadja skupaj z rezervno enobarvno vrstico, nato jo prilepite v svojo datoteko s slogi.
Komu je namenjeno
- Frontend razvijalci, ki potrebujejo ozadje za hero sekcijo, kartico ali gumb in želijo natančno vrstico
linear-gradient(), ne da bi si morali zapomniti sintakso. - Spletni in UI oblikovalci, ki sledijo maketi: preliv vizualno obnovijo, nato pa generirano CSS kodo neposredno predajo razvojni ekipi.
- Ustvarjalci e-poštnih sporočil in pristajalnih strani, ki potrebujejo rezervno enobarvno vrstico, da se videz elegantno poenostavi v starejših programih - orodje jo doda samodejno.
- Študenti, ki se učijo CSS, in želijo v realnem času videti, kako kot, barvni postanki in vrsta preliva spremenijo končni izgled.
Pogosta vprašanja
Je ta CSS gradient generator brezplačen?
Da - v celoti brezplačen, brez prijave, brez vodnih žigov in brez omejitev. Ustvarite si toliko prelivov, kot želite, in CSS kodo kopirajte naravnost v svoj projekt.
Se kaj pošilja na strežnik?
Ne. Preliv se v celoti sestavi in prikaže v vašem brskalniku z navadnim JavaScriptom. Nobene barve, koda ali podatki o uporabi se nikamor ne pošiljajo.
Kakšna je razlika med linearnim, radialnim in koničnim prelivom?
Linearni preliv barve zlije vzdolž ravne črte pod kotom, ki ga izberete. Radialni preliv seva navzven iz osrednje točke v obliki kroga ali elipse. Konični preliv barve razvrsti okoli osrednje točke, podobno kot barvno kolo ali tortni grafikon.
Kako delujejo barvni postanki v CSS prelivih?
Vsak postanek pari barvo s pozicijo od 0 % do 100 % vzdolž črte preliva. Brskalnik med sosednjima postankoma barve zlije gladko. Če dva postanka postavite na isto pozicijo, namesto prehoda nastane ostra meja - uporabno za proge in učinke tortnega grafikona.
Kateri brskalniki podpirajo te prelive?
Vsi sodobni brskalniki - Chrome, Firefox, Safari in Edge - podpirajo linear-gradient() in radial-gradient() brez predpon, conic-gradient() pa je povsod podprt od leta 2020. Kopirana koda vključuje tudi rezervno enobarvno ozadje za vse starejše primere.
Lahko ustvarjeni preliv uporabim kot barvo besedila?
Ne neposredno - prelivi so slike, ne barve. Preliv nastavite kot background-image na elementu z besedilom, nato dodajte še background-clip: text in color: transparent, da preliv zasije skozi črke.
Zakaj se na mojem prelivu pojavijo pasovi?
Pasovi se pojavijo, kadar se dva oddaljena postanka zlijeta čez dolg razpon podobnih odtenkov, kar razkrije 8-bitne barvne korake. Težavo omilite tako, da dodate vmesni barvni postanek, skrajšate razdaljo prehoda ali izberete barve, ki se razlikujejo tudi po svetlosti, ne le po odtenku.