CodeKitHubŠto je ovaj alat?
CSS gradijenti su slike koje preglednik generira iz popisa boja, umjesto datoteka koje uploadate — linear-gradient() prelazi boje duž ravne linije pod zadanim kutom, dok radial-gradient() prelazi boje prema van od središnje točke. Oba prihvaćaju dvije ili više prijelaznih točaka boje, svaka opcionalno prikvačena na poziciju duž gradijenta.
Pisani ručno, gradijenti se lako suptilno pogriješe: redoslijed točaka, nedostajući postoci, ili kutna vrijednost u pogrešnom smjeru (CSS kutovi idu u smjeru kazaljke sata od 'to top', za razliku od matematičkih kutova). Ovaj alat drži sintaksu podalje — postavite boje i pozicije biračima i klizačima, pratite ažuriranje kutije za pregled u stvarnom vremenu, i kopirajte rezultirajući CSS kad izgleda ispravno.
Izvor: CSS Images Module Level 3, W3C — specifikacija koja definira sintaksu linear-gradient() i radial-gradient().
Zašto ga koristiti?
- Prikaz uživo ažurira se trenutno pri svakoj promjeni boje, pozicije ili kuta — nema potrebe za ponovnim učitavanjem stranice da vidite rezultat.
- Prebacujte se između linearnog i radijalnog gradijenta jednim klikom; kontrola kuta automatski se skriva za radijalne gradijente, gdje se ne primjenjuje.
- Dodajte ili uklonite prijelazne točke boje (2 do 4) umjesto da budete ograničeni na fiksni dvobojni gradijent.
- Svaka točka ima vlastiti klizač pozicije, pa točke ne moraju biti jednako raspoređene.
- Ispisuje CSS spreman za lijepljenje koristeći standardnu sintaksu linear-gradient()/radial-gradient().
- Izvodi se u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo. Besplatno, bez prijave, radi na mobitelu.
Kako ga koristiti
- Odaberite Linearni ili Radijalni kao tip gradijenta.
- Za linearni gradijent, povucite klizač kuta — 90deg ide slijeva nadesno, 180deg ide odozgo prema dolje, i tako dalje.
- Postavite boju i poziciju za svaku točku; prva točka je početna boja gradijenta, posljednja je njegova završna boja.
- Kliknite '+ Dodaj točku' za dodavanje do ukupno 4 točke za višebojni gradijent, ili gumb ✕ za uklanjanje jedne (minimalno 2).
- Kopirajte generirani CSS i zalijepite ga u deklaraciju background ili background-image.
Primjer
Ulaz
Linearni · Kut: 90deg · Točke: #f97316 na 0%, #ec4899 na 100%Izlaz
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Gradijent slijeva nadesno od narančaste do roze — čest stil za gumbe, banere i hero pozadine.
Linearni naspram radijalnih gradijenata
Linearni gradijent prelazi boju duž ravne linije, kontroliran kutom — koristan za banere, gumbe i usmjerene pozadine. Radijalni gradijent prelazi boju prema van od središnje točke u prstenovima koji se šire, što odgovara efektima reflektora, značkama ili pozadinama u stilu sjaja. Ovaj alat postavlja radijalni gradijent na oblik kruga centriran u kutiji, što pokriva najčešći slučaj korištenja radijalnog gradijenta; CSS također podržava oblike elipse i necentrirane pozicije ako trebate dodatno ručno urediti izlaz.
Uobičajeni obrasci gradijenta
- Suptilan brend akcent: dvije bliske nijanse (npr. dvije nijanse iste boje) pod plitkim kutom za mekan pozadinski nanos boje.
- CTA gumb visokog kontrasta: dvije zasićene, komplementarne boje pod 90deg ili 135deg za drzak, klikabilan izgled.
- Preklop na slici: gradijent od prozirnog do pune boje (postavite prozirnost rgba bojom u pozadinskoj heksadecimalnoj vrijednosti birača, ili prilagodite nakon kopiranja) postavljen preko background-image.
- Višestruki dugini/brend gradijent: 3–4 točke raspoređene po cijelom rasponu 0–100% za glatkije, postupnije prijelaze nego što dvobojni gradijent dopušta.
- Radijalni reflektor: svijetla središnja točka blizu 0% koja blijedi prema tamnijoj rubnoj točki blizu 100%, korisno za hero sekcije ili isticanje kartica.
Uparivanje s drugim CSS alatima
Gradijenti se često kombiniraju sa zaobljenim rubovima i sjenama na istom elementu — kartica s gradijentom, mekanom box-shadow sjenom i zaobljenim rubovima čest je UI obrazac. Generirajte svaki dio zasebno i kombinirajte CSS deklaracije na elementu.
→ Generator box-shadow · Generator border-radius · Birač boje
Često postavljana pitanja
Koja je razlika između linear-gradient() i radial-gradient()?
linear-gradient() prelazi boje duž ravne linije pod zadanim kutom. radial-gradient() prelazi boje prema van od središnje točke u oblicima koji se šire (krug ili elipsa). Oba prihvaćaju istu vrstu popisa prijelaznih točaka boje odvojenih zarezima; razlikuje se samo oblik prijelaza.
Kako funkcioniraju kutovi CSS gradijenta?
CSS kutovi gradijenta idu u smjeru kazaljke sata počevši od 'to top' (0deg okrenuto prema gore). 90deg pokazuje udesno, 180deg pokazuje dolje, a 270deg pokazuje ulijevo — suprotna konvencija od standardnih matematičkih kutova, što je čest izvor zabune pri ručnom pisanju gradijenata.
Mogu li koristiti više od 4 prijelazne točke boje?
Da — CSS gradijenti prihvaćaju bilo koji broj prijelaznih točaka boje odvojenih zarezima. Ovaj alat ograničava interaktivni graditelj na 4 radi preglednog sučelja, ali možete kopirati generirani CSS i ručno dodati dodatne unose 'boja postotak%' odvojene zarezima u svom stylesheetu.
Zašto moj gradijent izgleda trakasto umjesto glatko?
Trakastost obično dolazi od boja koje su previše udaljene po nijansi s premalo točaka između njih, ili od ograničene preciznosti boje samog preglednika pri vrlo niskom kontrastu. Dodavanje srednje točke s izmiješanom bojom, ili odabir boja bliže po nijansi, općenito daje glatkiji izgled.
Mogu li animirati CSS gradijent?
Ne izravno — gradijenti nisu izvorno animabilni na način kao background-position ili transform, jer preglednici ne mogu interpolirati između dviju proizvoljnih definicija gradijenta. Uobičajena rješenja uključuju animiranje background-position na predimenzioniranom gradijentu, ili prijelaz background-color ako se mijenja samo jedna boja.