Léim go dtí an príomhábhar

Gineadóir Grádáin CSS saor in aisce

Cruthaigh grádáin CSS líneacha, radacha, agus cónach le réamhamharc beo. Cóipeáil an CSS le haon chliceáil.

Oibríonn as líne nuair a lódáiltear é
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Seachnaíonn sé meánphointí liatha idir dathanna an-difriúla. Cuireann sé líne shimplí sRGB leis mar chúltaca do sheanbhrabhsálaithe.

0%
100%

Réamhshocruithe

Úsáidí coitianta

  • Cruthaigh Grádáin do Rannóga LaochDearadh iomlán-leathanaigh grádáin bhacainn do rannóga laoch agus leathanaigh tuirlingthe.
  • Cruthaigh Grádáin Chnaipe agus CTAsDearadh súilmhealadh grádáin chnaipe bacainn do ghlaonna ghníomhaíochta a bhí ina seasamh amach.
  • Cruthaigh Grádáin Dhúinn do ChártaíDearadh grádáin líonadh do chártaí, modals, sidebars agus bacainn chomhpháirt UI.
  • Cruthaigh Grádáin do Ghrafaic Shóisialta MeáinDearadh bacainn grádáin bheo do phost Instagram, YouTube thumbnails agus cártaí Twitter.
  • Cruthaigh Scála Dhathaonna do ChairteannaGin scála grádáin dhathaonna do heatmaps, barraí dul chun cinn agus visualisations sonraí.

Conas a Oibríonn sé

Tógann an gineadóir grádán teaghráin ghrádáin CSS go díreach sa bhrabhsálaí — gan leabharlann, gan freastalaí, gan uaslódáil. Cuireann feidhm lámhscríofa an chomhréir cheart linear-gradient, radial-gradient, nó conic-gradient le chéile ó do stadanna datha agus uillinn i bhfíor-am, ansin formáidíonn sé an toradh don sprioc aschuir a roghnaíonn tú.

  1. 1
    Cumraigh stadanna agus treo
    Socraíonn tú idir 2 agus 6 stad datha ag baint úsáide as roghnóir datha dúchasach an bhrabhsálaí, ansin cuireann tú gach stad ar an ais 0–100% le sleamhnán raoin. Do ghrádáin línte agus conacha roghnaíonn tú freisin uillinn (0–360°); do ghrádáin ghathacha roghnaíonn tú an cruth (éilips nó ciorcal) agus an eochairfhocal méide a rialaíonn cé chomh fada is a shíneann an grádán.
  2. 2
    Cuireann buildCss an teaghrán grádáin le chéile
    Ar gach athrú, comhchuachann feidhm bhuildCss áitiúil do pharaiméadair isteach san fheidhm CSS cheart — m.sh. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Níl aon leabharlann i gceist; tógtar an teaghrán le loighic teimpléid JavaScript shimplí agus comhcheanglaítear é go díreach ón eagar stad.
  3. 3
    Rindreálann réamhamharc beo trí stíl inlíne
    Cuirtear an teaghrán grádáin cóimeáilte i bhfeidhm go díreach ar eilimint div mar stíl chúlra inlíne, ionas go rindreálann inneall CSS an bhrabhsálaí féin an réamhamharc. Níl aon chanbhás ná íomhá i gceist — is é a fheiceann tú go litriúil an airí CSS á chur i bhfeidhm.
  4. 4
    Aschur réidh le cóipeáil i gceithre fhormáid
    Athraíonn roghnóir formáide an teaghrán grádáin céanna go CSS lom (background: ...), bloc CSS le cúltaca dath aonair, aicme luacha treallach Tailwind, nó dearbhú athróg SCSS. Scríobhann cliceáil ar Chóipeáil an t-aschur roghnaithe chuig an ngearrthaisce trí navigator.clipboard.writeText. Ionchódaítear an grádán reatha freisin isteach i hais an URL ionas gur féidir leat é a chur i leabharmharcanna nó a roinnt.

Uirlisí Gaolmhara

Ceisteanna Coitianta