CodeKitHubKas ir šis rīks?
CSS gradienti ir attēli, ko pārlūks ģenerē no krāsu saraksta, nevis faili, kurus tu augšupielādē — linear-gradient() pāreja notiek gar taisnu līniju noteiktā leņķī, kamēr radial-gradient() pāreja notiek uz āru no centra punkta. Abi pieņem divas vai vairākas krāsu pieturas, katru pēc izvēles piesaistītu pozīcijai gar gradientu.
Rakstot ar rokām, gradientos ir viegli nedaudz kļūdīties: pieturu secība, trūkstoši procenti vai nepareizā virzienā iestatīta leņķa vērtība (CSS leņķi iet pulksteņrādītāja virzienā no 'to top', atšķirībā no matemātikas leņķiem). Šis rīks patur sintaksi neredzamu — iestati krāsas un pozīcijas ar izvēlnēm un slīdņiem, vēro, kā priekšskatījuma rūtiņa atjaunojas reālajā laikā, un kopē iegūto CSS, kad tas izskatās pareizi.
Avots: CSS Images Module Level 3, W3C — specifikācija, kas definē linear-gradient() un radial-gradient() sintaksi.
Kāpēc to izmantot?
- Tiešraides priekšskatījums atjaunojas uzreiz katrā krāsas, pozīcijas un leņķa maiņā — nav jāpārlādē lapa, lai redzētu rezultātu.
- Pārslēdzies starp lineāriem un radiāliem gradientiem ar vienu klikšķi; leņķa kontrole automātiski paslēpjas radiāliem gradientiem, kur tā nav piemērojama.
- Pievieno vai noņem krāsu pieturas (no 2 līdz 4), nevis esi ierobežots ar fiksētu divkrāsu gradientu.
- Katrai pieturai ir savs pozīcijas slīdnis, tāpēc pieturām nav jābūt vienmērīgi izvietotām.
- Izvada gatavu ielīmēšanai CSS, izmantojot standarta linear-gradient()/radial-gradient() sintaksi.
- Darbojas pilnībā tavā pārlūkā — nekas no tavas konfigurācijas nekur netiek augšupielādēts. Bezmaksas, nav reģistrācijas, darbojas mobilajās ierīcēs.
Kā to lietot
- Izvēlies Linear vai Radial kā gradienta tipu.
- Lineāram gradientam velc leņķa slīdni — 90deg iet no kreisās uz labo pusi, 180deg iet no augšas uz leju, un tā tālāk.
- Iestati katras pieturas krāsu un pozīciju; pirmā pietura ir gradienta sākuma krāsa, pēdējā ir tā beigu krāsa.
- Klikšķini '+ Add stop', lai pievienotu kopā līdz 4 pieturām vairākkrāsu gradientam, vai ✕ pogu, lai noņemtu vienu (minimums 2).
- Kopē ģenerēto CSS un ievieto to background vai background-image deklarācijā.
Piemērs
Ievade
Linear · Leņķis: 90deg · Pieturas: #f97316 pie 0%, #ec4899 pie 100%Izvade
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);No kreisās uz labo pusi ejošs oranžs-uz-rozā gradients — izplatīts stils pogām, baneriem un hero sadaļu fonam.
Lineārie pretstatā radiālajiem gradientiem
Lineārs gradients maina krāsu gar taisnu līniju, ko kontrolē leņķis — noderīgs baneriem, pogām un virzītiem foniem. Radiāls gradients maina krāsu uz āru no centra punkta izplešošos gredzenos, kas der prožektora efektiem, nozīmītēm vai spīduma stila fonam. Šis rīks pēc noklusējuma iestata radiālo gradientu kā apli, kas centrēts rūtiņā, kas sedz visbiežāko radiālā gradienta lietojumu; CSS atbalsta arī elipses formas un ārpuscentrētas pozīcijas, ja vēlies manuāli papildus rediģēt izvadi.
Izplatīti gradienta modeļi
- Smalks zīmola akcents: divas tuvas nokrāsas (piem., divi vienas krāsas toņi) nelielā leņķī mīkstam fona pārklājumam.
- Augsta kontrasta CTA poga: divas piesātinātas, papildinošas krāsas 90deg vai 135deg leņķī izteikti klikšķināmam izskatam.
- Pārklājums uz attēla: gradients no caurspīdīga uz vienu krāsu (iestati necaurredzamību, izmantojot rgba krāsu izvēlnes pamatā esošajā heksadecimālajā vērtībā, vai pielāgo pēc kopēšanas), slāņots virs background-image.
- Vairāku pieturu varavīksnes/zīmola gradients: 3–4 pieturas, izklātas visā 0–100% diapazonā, gludākām, pakāpeniskākām pārejām nekā divu krāsu gradients pieļauj.
- Radiāls prožektors: spilgta centra pietura tuvu 0%, kas izgaist uz tumšāku malas pieturu tuvu 100%, noderīga hero sadaļām vai kartīšu izcēlumiem.
Kombinēšana ar citiem CSS rīkiem
Gradienti bieži tiek kombinēti ar noapaļotiem stūriem un ēnām tajā pašā elementā — gradienta kartīte ar mīkstu box-shadow un noapaļotiem stūriem ir izplatīts UI modelis. Ģenerē katru daļu atsevišķi un apvieno CSS deklarācijas elementā.
→ Box Shadow ģenerators · Border Radius ģenerators · Krāsu izvēlne
Biežāk uzdotie jautājumi
Kāda ir atšķirība starp linear-gradient() un radial-gradient()?
linear-gradient() maina krāsas gar taisnu līniju noteiktā leņķī. radial-gradient() maina krāsas uz āru no centra punkta izplešošās formās (aplis vai elipse). Abi pieņem tāda paša veida ar komatu atdalītu krāsu pieturu sarakstu; atšķiras tikai pārejas forma.
Kā darbojas CSS gradienta leņķi?
CSS gradienta leņķi iet pulksteņrādītāja virzienā, sākot no 'to top' (0deg norāda uz augšu). 90deg norāda uz labo pusi, 180deg uz leju, un 270deg uz kreiso pusi — pretēja konvencija standarta matemātikas leņķiem, kas ir izplatīts neskaidrības avots, rakstot gradientus ar rokām.
Vai varu izmantot vairāk nekā 4 krāsu pieturas?
Jā — CSS gradienti pieņem jebkādu skaitu ar komatu atdalītu krāsu pieturu. Šis rīks ierobežo interaktīvo veidotāju līdz 4 pārvaldāmam UI, taču vari kopēt ģenerēto CSS un manuāli pievienot vairāk ar komatu atdalītus 'krāsa pozīcija%' ierakstus savā stilu failā.
Kāpēc mans gradients izskatās joslains, nevis gluds?
Joslainums parasti rodas no krāsām, kas ir pārāk tālu vienai no otras nokrāsā ar pārāk maz pieturām starp tām, vai no pārlūka paša ierobežotās krāsu precizitātes ļoti zemā kontrastā. Starpposma pieturas ar jauktu krāsu pievienošana vai nokrāsā tuvāku krāsu izvēle parasti rada gludāku rezultātu.
Vai varu animēt CSS gradientu?
Ne tieši — gradienti nav dabiski animējami tā, kā background-position vai transform, jo pārlūki nevar interpolēt starp diviem patvaļīgiem gradienta definējumiem. Izplatīti risinājumi ietver background-position animēšanu uz pārmērīga izmēra gradienta vai background-color pāreju, ja mainās tikai viena krāsa.