Jenereta ya Gradient ya CSS

Jenga gradient za linear, radial na conic zikiwa na vituo visivyo na kikomo, ulinganishaji unaojua OKLCH, na matokeo ya utility ya Tailwind v4. Hakikisho la moja kwa moja, preseti zaidi ya 30, kwenye kivinjari chako.

Uwiano

Pembe: 90°

Ulinganishaji wa rangi

Vituo vya rangi

CSS

Tailwind v4

JSON

Preseti

Imejengwa kwa gradient za CSS za uzalishaji

Linear / radial / conic, OKLCH-laini, inayojua Tailwind — pamoja na vidogo vichache vinavyoifanya kuwa ya kufurahisha kweli kutumia.

Aina tatu za gradient

Linear ikiwa na pembe 0-360°, radial ikiwa na duara/ellipse + ukubwa + nafasi, conic ikiwa na from-angle + nafasi. Zote hutoa sintaksia ya CSS Images Module Level 4 inayofuata viwango.

Hadi vituo 12 vya rangi

Ongeza vituo katika asilimia yoyote, buruta slaida ya nafasi kurekebisha kwa undani, bofya swatch kuchagua rangi au bandika HEX. Vituo hupangwa kiotomatiki kwenye matokeo. Bofya × kuondoa (chini kabisa vituo 2).

Ulinganishaji unaojua OKLCH

Badilisha kati ya sRGB ya chaguo-msingi na ulinganishaji wa kisasa in oklch. OKLCH hutoa katikati laini zaidi kwa mtazamo — hakuna mistari ya kijivu chafu kwenye mabadiliko ya rangi. Hurudi nyuma kwa upole kwenye vivinjari ambavyo havijasambaza CSS Color 4.

Matokeo ya CSS, Tailwind v4, JSON

Paneli tatu za matokeo husasishwa moja kwa moja: CSS ghafi (background-image: linear-gradient(...)), utility ya thamani-holela ya Tailwind v4 (bg-[linear-gradient(...)]), na kipande cha tokeni ya muundo ya JSON tayari kwa Style Dictionary au Figma Tokens.

Preseti zaidi ya 30 zilizochaguliwa

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — bofya kupakia na kurekebisha. Kila preseti ni mahali pa kuanzia pa ubora wa uzalishaji halisi, si jina tu.

Hakikisho la moja kwa moja + faragha kwa muundo

Hakikisho linarejeshwa kwa background-image ya asili kwa hivyo unachokiona ni hasa kile stylesheet yako huzalisha. Kila pikseli huendeshwa ndani ya nchi — fungua DevTools → Network na uthibitishe maombi sifuri yanayotoka nje.

Jinsi ya kujenga gradient ya CSS

Hatua nne kutoka ubao tupu hadi CSS, Tailwind, au JSON tayari kwa uzalishaji.

1

Chagua aina ya gradient

Linear kwa mandharinyuma, vichwa, sehemu za hero. Radial kwa spotlights, vignettes, vitufe vya kung'aa. Conic kwa chati za pai, magurudumu ya rangi, na mandharinyuma za bandia za mtindo. Badilisha kati yao kwa vichupo — vituo vyako vya rangi vinatunzwa kwenye mabadiliko.
2

Weka vituo vyako vya rangi

Bofya swatch ya rangi kufungua kichagua, au bandika HEX moja kwa moja kwenye uwanja. Buruta slaida kuweka nafasi ya kituo 0-100%. Bofya + Ongeza kituo kuingiza kituo kipya kwenye pengo kubwa zaidi (na rangi ya katikati). Hadi vituo 12 jumla.
3

Rekebisha jiometri + ulinganishaji

Kwa linear, weka pembe (0° inaelekeza juu, 90° kulia). Kwa radial, chagua umbo, neno muhimu la ukubwa, na nafasi ya kituo. Kwa conic, weka pembe ya kuanzia. Badilisha Ulinganishaji wa rangi kuwa OKLCH kwa katikati laini kwa mtazamo katika gradient za rangi nyingi.
4

Nakili matokeo

Paneli tatu husasishwa moja kwa moja: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (umbo la tokeni ya muundo). Tumia ikoni ya kunakili kwenye kila moja, au bonyeza Pakua CSS kuhifadhi faili ya gradient.css tayari kuingizwa kwenye mradi.

Imejengwa kwa wabunifu + wasanidi

Mazingira manne ya kawaida ambapo zana ya kivinjari inayotanguliza faragha hushinda kufungua Figma + tovuti tofauti ya gradient.

Mandharinyuma ya sehemu ya hero kwa ukurasa wa uuzaji

Chagua preseti karibu na chapa yako, dondosha rangi zako mbili za chapa kwenye vituo, badilisha kuwa ulinganishaji wa OKLCH kwa katikati safi. Nakili CSS, bandika kwenye stylesheet ya hero yako. Muda jumla: chini ya dakika 2.

Gradient za vitufe + kadi zinazojua chapa

Jenga gradient ya chapa ya vituo 3 mara moja, nakili kama tokeni ya muundo ya JSON, dondosha kwenye Style Dictionary / Figma Tokens. Sasa kila kitufe + kadi kwenye kila jukwaa hutumia gradient sawa kwa rejea. Sasisha mahali pamoja, husambaa kila mahali.

Mandharinyuma za conic kwa chati + dashibodi

Gradient za conic za bandia ni kamili kwa mwonekano wa chati za pai, vipimo vya maendeleo, au hali za 'data-loading' shimmer. Chagua aina ya conic, weka from-angle, dondosha vituo kwa asilimia sahihi — hesabu hulinganisha pembe 0-360° na nafasi za asilimia kwa usahihi.

Mandharinyuma maalum kwa slaidi, machapisho ya kijamii, picha za hero

Jenga gradient, weka uwiano wa kipengele kufanana na lengo lako (16:9 kwa slaidi, 1:1 kwa IG, 3:1 kwa kichwa cha X), piga skrini ya hakikisho. Au nakili CSS kwenye faili ya HTML ya mara moja na piga skrini katika kivinjari chako kwa ukubwa halisi wa pikseli unaohitaji.

100% faragha — hufanya kazi kwenye kivinjari chako

Rangi zako na gradient kamwe haziondoki kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sifuri yanayotoka nje wakati wa operesheni yoyote.

Mkusanyiko wa mfuatano wa gradient, uchakataji wa CSS / Tailwind / JSON, na hakikisho la moja kwa moja yote huendeshwa kama JavaScript kwenye mashine yako — hakuna uchakataji upande wa seva, hakuna API ya wahusika wa tatu.
Hakikisho hutumia background-image ya asili ya CSS — kwa hivyo gradient iliyorejeshwa inafanana hasa na kile stylesheet yako itakachozalisha kwenye vivinjari vya watumiaji wako.
Hakuna kuingia, hakuna telemetry kwenye thamani za rangi. Tunatumia tu cookie moja kwa hali ya idhini ya cookie na moja kwa upendeleo wa lugha.

Miongozo inayohusiana

Masomo yaliyochaguliwa kwa mkono kuhusu gradient za CSS, ulinganishaji wa OKLCH, na mifumo ya tokeni za muundo.

Maswali yanayoulizwa mara kwa mara

Tofauti ni nini kati ya linear, radial, na conic?

Linear huchanganya kwa mstari ulionyooka kwa pembe iliyochaguliwa (0° = juu, 90° = kulia). Radial huchanganya kutoka kwa kituo nje — duara au ellipse, ikiwa na maneno muhimu ya ukubwa kama farthest-corner. Conic huzunguka kuzunguka kituo — vituo vya rangi hukaa kwa pembe kama mikono ya saa. Conic ni nzuri kwa chati za pai, vipimo vya kitone, na mandharinyuma za bandia za color-wheel.

Nitumie lini ulinganishaji wa OKLCH?

Wakati wa kubadilishana kati ya rangi ambazo si analojia — k.m. bluu → manjano, au nyekundu → kijani. Ulinganishaji wa chaguo-msingi wa sRGB hupitia kati ya kijivu chafu; OKLCH (CSS Color Module 4 in oklch) huweka katikati ikiwa wazi kwa sababu hulinganisha katika nafasi inayofanana kwa mtazamo. Kwa gradient za vituo viwili kati ya rangi zinazofanana, tofauti ni ndogo. Kwa gradient za vituo vingi au za safu pana ya rangi, OKLCH ni bora zaidi sana.

Matokeo ya Tailwind v4 yananipa nini?

Utility ya thamani-holela unayoweza kubandika moja kwa moja kwenye JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Hakuna mabadiliko ya tailwind.config.js yanayohitajika; hufanya kazi kwenye mradi wowote wa Tailwind 4. Ukipendelea tokeni za rangi zilizotajwa, nakili CSS badala yake na ubadilishe kwa mkono.

Je, gradient zitafanya kazi kwenye vivinjari vya zamani?

Linear na radial gradient zimeungwa mkono kote tangu 2014. Conic gradient zilisafirishwa kwa vivinjari vyote vya kijani ifikapo 2021. Neno muhimu la ulinganishaji in oklch linaungwa mkono katika Chrome 111+, Safari 16.2+, Firefox 113+. Ukihitaji kusaidia vivinjari vya zamani, tumia ulinganishaji wa chaguo-msingi wa sRGB — tofauti ya kuona ina umuhimu zaidi kwa gradient za vituo vingi zenye mabadiliko ya rangi.

Je, kuna kitu kinachotumwa kwa seva yako?

Hapana. Uzalishaji wa mfuatano wa gradient, uchakataji wa CSS / Tailwind / JSON, na hakikisho la moja kwa moja yote huendeshwa katika JavaScript kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sifuri yanayotoka nje wakati wa operesheni yoyote. Bandika rangi za chapa, tokeni za ndani — hakuna kinachotoka kwenye laptop yako.