Kizalishi cha Gradient

Zana zote

Jenga CSS gradient za mstari, radial na conic kutoka mwanzo na udhibiti wa vituo vingi vinavyoweza kuburuzwa na vianzio vilivyopangwa. Nakili CSS tayari kubandika papo hapo.

Onyesho la moja kwa moja
Vianzio
Aina ya gradient
Pembe
°
Vituo vya rangi
Buruta kishikio kuhamisha kituo, au bofya mwambaa kuongeza moja. Chagua kituo kuhariri rangi yake.
Kituo kilichochaguliwa
%
CSS
background: —;

Kila kitu kinakokotolewa moja kwa moja kwenye kivinjari chako — hakuna usajili, bila malipo kabisa.

Kuhusu Kizalishi cha Gradient

Kitengeneza Gredienti (Gradient Generator) hujenga gredienti maalum za CSS kuanzia mwanzo kabisa. Chagua aina ya mstari, duara au koni, weka pembe, na uunde mchanganyiko kwa kihariri chenye vituo vingi: buruta vishikizo ili kuhamisha vituo, bofya upau ili kuongeza vipya, na badilisha rangi ya kituo chochote kwa kitafuta rangi — muonekano halisi husasishwa unapofanya kazi.

Michoro iliyotayarishwa (presets) hukupa mwanzo imara pale usipotaka kuanzia kwenye ukurasa mtupu, na vitendo vya mbofyo mmoja — nasibu, geuza, zungusha 45° — huifanya uchunguzi kuwa wa haraka. CSS iliyotengenezwa daima huonekana na huendana na muonekano, hivyo unachonakili ndicho hasa ulichokiona.

Kila kitu hukokotolewa papo hapo kwenye kivinjari chako bila gharama. Nakili kanuni kamili ya CSS au thamani ya usuli tu na uibandike kwenye faili la mtindo, mtindo wa kitufe au sehemu ya "hero" — kitengeneza gredienti cha CSS rahisi kwa usuli, tabaka la juu na alama za kiolesura.

Jinsi ya kutumia Kizalishi cha Gradient

  1. Chagua aina ya gredienti: mstari, duara au koni.
  2. Anzia kutoka kwenye kilichotayarishwa au bofya "Random" kwa mwanzo wa haraka.
  3. Buruta vishikizo vya vituo ili kuweka nafasi za rangi, bofya upau ili kuongeza vituo, na hariri rangi ya kila kituo.
  4. Rekebisha pembe, au tumia "Reverse" na "Rotate 45°" ili kubadilisha mwelekeo wa mchanganyiko.
  5. Nakili kanuni ya CSS au thamani ya usuli na uibandike kwenye mradi wako.

Maswali yanayoulizwa mara kwa mara

Ndiyo. Chombo hiki kinafanya kazi kabisa upande wa mteja — hakuna kujisajili, hakuna mikopo na hakuna vikomo vya gredienti ngapi unazojenga au kunakili.

Gredienti ya mstari huchanganya rangi kwa mstari ulionyooka kwenye pembe uliyochagua. Gredienti ya duara hueneza kutoka katikati kwa miduara. Gredienti ya koni huzunguka rangi kuzunguka kitovu kama chati ya pai, jambo linalofaa sana kwa magurudumu ya rangi na pete za maendeleo.

Gredienti inahitaji angalau vituo viwili, na unaweza kuendelea kubofya upau ili kuongeza zaidi. Kila kituo kina rangi yake na nafasi inayoweza kuburutwa, hivyo mchanganyiko changamano wa rangi nyingi ni rahisi kujenga.

Gredienti za mstari na duara zinasaidiwa kila mahali. Gredienti za koni zinasaidiwa katika vivinjari vyote vya kisasa lakini si vya zamani sana, hivyo toa rangi ya usuli ya akiba (fallback) ikiwa unahitaji kusaidia matoleo ya zamani.

Ndiyo — tumia chombo mwenzake, Kitengeneza Gredienti kutoka Picha, ambacho hutoa rangi kuu za picha uliyopakia na kuzibadilisha kuwa vituo vya gredienti vinavyoharirika. Chombo hiki ndicho mwenzake wa kuanzia mwanzo.
Shiriki hii
Zana Zinazohusiana
Kizalishi cha Gradient kutoka Picha Vuta gradient nzuri kutoka picha yoyote — dondosha picha, chagua hisia, na rangi kuu zinakuwa vituo vya gradient vinavyoweza kuburuzwa. Nakili CSS tayari kubandika papo hapo. Bila Malipo
Kizalishi cha Rangi za Rangi Jenga rangi zenye usawa kutoka kwenye gurudumu la rangi linalowingiliana — tumia sheria za usawa kama analogous, complementary au triad, kisha nakili thamani yoyote papo hapo. Bila Malipo
Kichanganyaji cha Rangi Changanya rangi ya mwanzo na rangi ya mwisho katika hatua hadi 10 — onyesha gradient, chukua vivuli vyote na nakili muundo wowote papo hapo. Bila Malipo
Kitafutaji cha Rangi Zilizo na Majina Pata rangi iliyoitwa karibu zaidi ya CSS na kivuli cha Tailwind kilicho karibu kwa rangi yoyote — inalingana kwa mtazamo, na thamani tayari kunakiliwa. Bila Malipo
Kichomaji cha Rangi za Picha Vuta rangi zilizosafishwa, tayari kunakiliwa kutoka picha yoyote. Bila Malipo
Kisimulizi cha Upofu wa Rangi Ona picha yako au rangi kama wanavyoona watu wenye protanopia, deuteranopia, tritanopia au achromatopsia — inafanya kazi kabisa kwenye kivinjari chako, hakuna kinachopakiwa. Bila Malipo
Utafutaji maarufu
jenereta ya gradienti kitengeneza css gradienti jenereta ya gradienti laini kitengeneza gradienti radia css gradienti koni jenereta ya gradienti bure
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.