CodeKitHubMis see tööriist on?
CSS gradiendid on pildid, mille brauser genereerib värvide loetelust, mitte failid, mida sa üles laadid — linear-gradient() muudab värve mööda sirgjoont teatud nurga all, radial-gradient() aga muudab värve keskpunktist väljapoole. Mõlemad võtavad vastu kaks või enam värvipeatust, millest igaüht saab soovi korral kinnitada kindlale positsioonile gradiendis.
Käsitsi kirjutades on gradiente lihtne kergelt valesti teha: peatuste järjekord, puuduvad protsendid või vale suunaga nurga väärtus (CSS nurgad kulgevad päripäeva alates 'to top', erinevalt matemaatilistest nurkadest). See tööriist hoiab süntaksi eemal — määra värvid ja positsioonid valijate ja liuguritega, jälgi eelvaate kasti reaalajas uuenemist ning kopeeri saadud CSS, kui see hea välja näeb.
Allikas: CSS Images Module Level 3, W3C — spetsifikatsioon, mis defineerib linear-gradient() ja radial-gradient() süntaksi.
Miks seda kasutada?
- Eelvaade uueneb koheselt iga värvi, positsiooni ja nurga muutuse peale — lehte pole vaja tulemuse nägemiseks uuesti laadida.
- Vaheta ühe klõpsuga lineaarse ja radiaalse gradiendi vahel; nurga juhtimine peidab end automaatselt radiaalse gradiendi puhul, kus see ei kehti.
- Lisa või eemalda värvipeatusi (2 kuni 4), selle asemel et olla piiratud kindla kahevärvilise gradiendiga.
- Igal peatusel on oma positsiooni liugur, seega ei pea peatused olema ühtlaselt jaotatud.
- Väljastab kopeerimisvalmis CSS-i, kasutades standardset linear-gradient()/radial-gradient() süntaksit.
- Töötab täielikult sinu brauseris — midagi, mida sa seadistad, ei laadita kuhugi üles. Tasuta, registreerimist pole vaja, töötab ka mobiilis.
Kuidas kasutada
- Vali gradiendi tüübiks Lineaarne või Radiaalne.
- Lineaarse gradiendi puhul lohista nurga liugurit — 90kraadi liigub vasakult paremale, 180kraadi ülalt alla ja nii edasi.
- Määra iga peatuse värv ja positsioon; esimene peatus on gradiendi algusvärv, viimane lõppvärv.
- Klõpsa '+ Lisa peatus', et lisada kuni 4 peatust mitmevärvilise gradiendi jaoks, või ✕ nupp, et üks eemaldada (minimaalselt 2).
- Kopeeri loodud CSS ja kleebi see background või background-image deklaratsiooni.
Näide
Sisend
Lineaarne · Nurk: 90kraadi · Peatused: #f97316 kohal 0%, #ec4899 kohal 100%Tulemus
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Vasakult paremale kulgev oranžikast roosaks muutuv gradient — levinud stiil nuppude, bännerite ja hero-taustade jaoks.
Lineaarne vs radiaalne gradient
Lineaarne gradient muudab värvi mööda sirgjoont, mida juhib nurk — sobib bänneritele, nuppudele ja suunavatele taustadele. Radiaalne gradient muudab värvi keskpunktist väljapoole laienevates ringides, mis sobib prožektori-efektidele, embleemidele või hõõguvatele taustadele. See tööriist kasutab radiaalse gradiendi vaikimisi kasti keskele paigutatud ringi kuju, mis katab kõige levinuma radiaalse kasutusjuhu; CSS toetab ka ellipsi kuju ja keskmest väljas asuvaid positsioone, kui pead väljundit hiljem käsitsi täiendama.
Levinud gradiendi mustrid
- Diskreetne brändi aktsent: kaks lähedast tooni (nt sama värvi kaks varjundit) madalal nurgal pehme taustatoonuse jaoks.
- Kõrge kontrastiga CTA nupp: kaks küllastunud, üksteist täiendavat värvi 90 või 135 kraadi juures julge, klikitava välimuse jaoks.
- Ülekate pildil: gradient läbipaistvusest kindlale värvile (määra läbipaistvus värvivalija taustal oleva hex-koodi rgba abil või reguleeri pärast kopeerimist), mis on paigutatud background-image peale.
- Mitmepeatuseline vikerkaar/brändi gradient: 3–4 peatust jaotatuna üle täieliku 0–100% ulatuse sujuvamate, järkjärgulisemate üleminekute jaoks kui kahevärviline gradient võimaldab.
- Radiaalne prožektor: hele keskmine peatus lähedal 0%-le, mis tuhmub tumedamaks servapeatuseks 100% lähedal, kasulik hero-sektsioonide või kaardi esiletõstete jaoks.
Kombineerimine teiste CSS tööriistadega
Gradiente kombineeritakse tihti ümarate nurkade ja varjudega samal elemendil — gradientkaart pehme box-shadow'i ja ümarate nurkadega on levinud UI muster. Loo iga tükk eraldi ja kombineeri CSS deklaratsioonid elemendil.
→ Box Shadow Generaator · Border Radius Generaator · Värvivalija
Korduma kippuvad küsimused
Mis vahe on linear-gradient() ja radial-gradient() vahel?
linear-gradient() muudab värve mööda sirgjoont määratud nurga all. radial-gradient() muudab värve keskpunktist väljapoole laienevates kujundites (ring või ellips). Mõlemad võtavad vastu sama tüüpi komadega eraldatud värvipeatuste loetelu; erineb ainult ülemineku kuju.
Kuidas CSS gradiendi nurgad töötavad?
CSS gradiendi nurgad kulgevad päripäeva alates 'to top' (0 kraadi osutab üles). 90 kraadi osutab paremale, 180 kraadi alla ja 270 kraadi vasakule — vastupidine tavapärasele matemaatilisele nurgale, mis on levinud segaduse allikas gradientide käsitsi kirjutamisel.
Kas ma saan kasutada rohkem kui 4 värvipeatust?
Jah — CSS gradiendid võtavad vastu mistahes arvu komadega eraldatud värvipeatusi. See tööriist piirab interaktiivse loomise 4-ga, et hoida kasutajaliides hallatavana, kuid saad kopeeritud CSS-i võtta ja lisada käsitsi rohkem komadega eraldatud 'värv positsioon%' kirjeid oma stiililehele.
Miks mu gradient näeb triibuline välja, mitte sujuv?
Triibulisus tuleb tavaliselt värvidest, mis on toonilt liiga kaugel ning millel on liiga vähe peatusi nende vahel, või brauseri enda piiratud värvitäpsusest väga madala kontrasti korral. Vahepealse peatuse lisamine segatud värviga või lähedasema tooniga värvide valimine annab üldiselt sujuvama tulemuse.
Kas ma saan CSS gradienti animeerida?
Mitte otseselt — gradiendid ei ole loomupäraselt animeeritavad nii nagu background-position või transform, kuna brauserid ei suuda interpoleerida kahe suvalise gradiendi definitsiooni vahel. Levinud lahendused hõlmavad background-position animeerimist üledimensioneeritud gradiendil või background-color üleminekut, kui muutub ainult üks värv.