Neidio i'r prif gynnwys
LibraTool logoLibraTool

Generadur Graddiant CSS am ddim

Crëwch raddiannau CSS llinol, radial, a conig gyda rhagolwg byw. Copïo'r CSS gydag un clic.

Yn gweithio all-lein ar ôl llwytho
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Yn osgoi canolbwyntiau llwyd rhwng lliwiau gwahanol iawn. Yn ychwanegu llinell sRGB plaen fel dewis wrth gefn ar gyfer hen borwyr.

0%
100%

Rhagosodiadau

Defnyddiau cyffredin

  • Creu Gradiau ar gyfer Adrannau ArwrCynllunio cefndiroedd graddol llawn tudalen ar gyfer adrannau arwr gwefan a phlattfformau glaniad.
  • Creu Botymau Gradiau a CTAsCynllunio cefndiroedd botymau graddol sy'n denu sylw ar gyfer alwadau i weithredu sy'n sefyll allan.
  • Creu Cefndiroedd Graddol ar gyfer CardiauCynllunio llenwadau graddol ar gyfer cardiau, moduau, barrau ochr a chefndiroedd cydrannau UI.
  • Creu Gradiau ar gyfer Graffigau Cyfryngau CymdeithasolCynllunio cefndiroedd graddol bywfydol ar gyfer postiadau Instagram, lluniau bychan YouTube a cherdiau Twitter.
  • Creu Raddfeydd Lliw ar gyfer SiartiauCynhyrchu raddfeydd lliw graddol ar gyfer mapiau gwres, bariau cynnydd a delweddau data.

Sut Mae'n Gweithio

Mae'r generadur graddiant yn adeiladu llinynnau graddiant CSS yn uniongyrchol yn y porwr — dim llyfrgell, dim gweinydd, dim llwytho. Mae ffwythiant wedi'i ysgrifennu â llaw yn cydosod y gystrawen linear-gradient, radial-gradient, neu conic-gradient gywir o'ch stopiau lliw ac ongl mewn amser real, yna'n fformatio'r canlyniad ar gyfer pa bynnag darged allbwn rydych chi'n ei ddewis.

  1. 1
    Ffurfweddu stopiau a chyfeiriad
    Rydych yn gosod rhwng 2 a 6 stop lliw gan ddefnyddio dewisydd lliw brodorol y porwr, yna'n safleoli pob stop ar hyd yr echel 0–100% â llithrydd amrediad. Ar gyfer graddiannau llinellol a chonig rydych hefyd yn dewis ongl (0–360°); ar gyfer graddiannau rheiddiol rydych chi'n dewis y siâp (elips neu gylch) a'r gair allweddol maint sy'n rheoli pa mor bell mae'r graddiant yn ymestyn.
  2. 2
    Mae buildCss yn cydosod y llinyn graddiant
    Ar bob newid, mae ffwythiant buildCss lleol yn cydgadwyno eich paramedrau i mewn i alwad ffwythiant CSS gywir — e.e. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nid oes llyfrgell yn gysylltiedig; adeiledir y llinyn â rhesymeg templed JavaScript plaen a'i gydgadwyno'n uniongyrchol o'r arae stopiau.
  3. 3
    Mae rhagolwg byw'n rendro drwy arddull mewn-lein
    Mae'r llinyn graddiant a gydosodwyd yn cael ei gymhwyso'n uniongyrchol i elfen div fel arddull cefndir mewn-lein, fel bod injan CSS y porwr ei hun yn rendro'r rhagolwg. Nid oes cynfas na delwedd yn gysylltiedig — yr hyn a welwch yw'r briodwedd CSS yn cael ei chymhwyso'n llythrennol.
  4. 4
    Allbwn yn barod i'w gopïo mewn pedwar fformat
    Mae dewisydd fformat yn trawsnewid yr un llinyn graddiant i CSS plaen (background: ...), bloc CSS-gyda-wrth-gefn-solid, dosbarth gwerth-mympwyol Tailwind, neu ddatganiad newidyn SCSS. Mae clicio Copïo'n ysgrifennu'r allbwn a ddewiswyd i'r clipfwrdd drwy navigator.clipboard.writeText. Mae'r graddiant cyfredol hefyd yn cael ei amgodio i mewn i hash yr URL fel y gallwch ei farcio neu ei rannu.

Offer Cysylltiedig

🟦

Generadur CSS Grid

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Rhowch gynnig arni
↔️

Generadur CSS Flexbox

Arbrofi gyda chyfeiriad flex, lapio, cyfiawnhau ac alinio ar eitemau byw — ac copïo'r CSS.

Rhowch gynnig arni
🧮

Cyfrifiannell Matricsau

Adio, tynnu, lluosi, trawsddodi, gwrthdroi a lleihau matricsau, ynghyd â'r determinant, rheng, eigenwerthoedd a datrys Ax = b — hyd at 8×8, gyda chopïo ag un tap. Am ddim ac yn breifat.

Rhowch gynnig arni

Cwestiynau Cyffredin