Ruka hadi maudhui makuu
LibraTool logoLibraTool

Jenereta ya Mwelekeo wa CSS bila malipo

Unda mwelekeo wa CSS wa mstari, radiali, na mviringo na mwonekano wa moja kwa moja. Nakili CSS kwa kubonyeza mara moja.

Inafanya kazi bila mtandao mara ikishapakia
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Huepuka sehemu za kati za kijivu kati ya rangi tofauti sana. Huongeza mstari wa kawaida wa sRGB kama mbadala kwa vivinjari vya zamani.

0%
100%

Mipangilio ya awali

Matumizi ya kawaida

  • Unda Gradients kwa Hero SectionsWambua upinde wa gradient wa ukurasa kamili kwa sehemu za mjumbe wa wavuti na kurasa za kumkaribisha.
  • Unda Kitufe cha Gradient na CTAWambua upinde wa gradient unaovuta kwa kitufe cha kukamatia hatua.
  • Unda Upinde wa Gradient kwa Card BackgroundsWambua upinde wa gradient kwa kadi moduli paneli za kando na ngata za mitambo ya UI.
  • Unda Gradients kwa Social Media GraphicsWambua upinde wa gradient wenye macho kwa Instagram posts YouTube thumbnails na Twitter cards.
  • Unda Mizani ya Kuvuta kwa ChartsTunza mizani ya upinde wa gradient kwa heatmaps mipango ya maendeleo na ulingani wa data.

Jinsi Inavyofanya Kazi

Kitengenezea gredienti kinajenga mifuatano ya gredienti ya CSS moja kwa moja kwenye kivinjari — hakuna maktaba, hakuna seva, hakuna upakiaji. Kazi iliyoandikwa mwenyewe inajenga sintaksia sahihi ya linear-gradient, radial-gradient, au conic-gradient kutoka vituo vyako vya rangi na pembe papo hapo, kisha kupanga matokeo kwa lengo lolote la matokeo unalochagua.

  1. 1
    Panga vituo na mwelekeo
    Unaweka vituo 2 hadi 6 vya rangi kwa kutumia kichagua rangi cha asili cha kivinjari, kisha kuweka nafasi ya kila kituo kwenye mhimili wa 0–100% na kitelezi cha wigo. Kwa gredienti za mstari na koni pia unachagua pembe (0–360°); kwa gredienti za radial unachagua umbo (duaradufu au duara) na neno la ukubwa linalodhibiti umbali gredienti inavyoenea.
  2. 2
    buildCss inajenga mfuatano wa gredienti
    Kwa kila mabadiliko, kazi ya ndani ya buildCss inaunganisha vigezo vyako kuwa wito sahihi wa kazi ya CSS — mfano linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Hakuna maktaba inayohusika; mfuatano unajengwa kwa mantiki wazi ya template ya JavaScript na kuunganishwa moja kwa moja kutoka safu ya vituo.
  3. 3
    Onyesho la awali la moja kwa moja linaonyeshwa kupitia mtindo wa ndani
    Mfuatano wa gredienti uliojengwa unatumika moja kwa moja kwenye kipengele cha div kama mtindo wa ndani wa mandhari ya nyuma, kwa hiyo injini ya CSS ya kivinjari chenyewe inaonyesha onyesho la awali. Hakuna canvas au picha inayohusika — unachokiona ni sifa halisi ya CSS inayotumika.
  4. 4
    Matokeo tayari-kunakili katika miundo minne
    Kichaguzi cha muundo kinabadilisha mfuatano ule ule wa gredienti kuwa CSS wazi (background: ...), kizuizi cha CSS-na-badala-thabiti, klasi ya thamani-huru ya Tailwind, au tamko la kigezo la SCSS. Kubofya Nakili kunaandika matokeo yaliyochaguliwa kwenye clipboard kupitia navigator.clipboard.writeText. Gredienti ya sasa pia imesimbwa kwenye hash ya URL ili uweze kuiweka alama au kuishiriki.

Zana Zinazohusiana

🟦

Kitengenezea CSS Grid

Zungu CSS grid — tracks, vitengo na pengo — na kunakili CSS na HTML iliyozalishwa.

Jaribu
↔️

Kitengenezea CSS Flexbox

Jaribu mwelekeo wa kubana, songa, na justifikasi kwenye vitu vya moja kwa moja — na kunakili CSS.

Jaribu
🧮

Kikokoteni cha Matrix

Jumlisha, toa, zidisha, geuza, linganua na punguza matriki, pamoja na kibainishi, daraja, thamani eigen na kutatua Ax = b – hadi 8×8, kwa kunakili kwa mguso mmoja. Bila malipo na faragha.

Jaribu

Maswali Yanayoulizwa Mara Kwa Mara