Joan eduki nagusira
LibraTool logoLibraTool

CSS Gradiente Sortzailea doan

Sortu lineala, erradiala eta konikoa CSS gradienteak zuzeneko aurrebistarekin. Kopiatu CSS klik batean.

Linez kanpo funtzionatzen du behin kargatuta
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Oso kolore desberdinen arteko erdiko gris-puntuak saihesten ditu. sRGB lerro arrunt bat gehitzen du nabigatzaile zaharretarako ordezko gisa.

0%
100%

Aurrezarpenak

Ohiko erabilerak

  • Sortu Gradiente Eroalak-ataletanDiseinatu orri osoa gradiente atzealeak webgune eroalak-ataletan eta lur-orrientzat.
  • Sortu Gradiente Botoiak eta CTADiseinatu behatze-sortzaileak gradiente-botoi atzealeak zenbakiak-zenbakiak salientzia-gaur.
  • Sortu Gradiente Atzealeak KartaientzatDiseinatu gradiente-beteketaak kartaientzat, modalak, albo-barrak eta UI osagai atzealeak.
  • Sortu Gradiente Gizarte-Bitarteko GrafikakDiseinatu biziz-gradiente atzealeak Instagram-argitalpenak, YouTube-argazkiak eta Twitter-kartaientzat.
  • Sortu Koloree-eskalak GrafikoakSortu gradiente-koloree-eskalak bero-mapak, aurreko-barreak eta datu-bistaratzetarako.

Nola Funtzionatzen Du

Gradiente-sortzaileak CSS gradiente-kateak zuzenean nabigatzailean eraikitzen ditu — liburutegirik ez, zerbitzaririk ez, igoerarik ez. Eskuz idatzitako funtzio batek linear-gradient, radial-gradient, edo conic-gradient sintaxi zuzena muntatzen du zure kolore-geldiuneetatik eta angelutik denbora errealean, gero emaitza formateatzen du hautatzen duzun irteera-helburu edozeinerako.

  1. 1
    Konfiguratu geldiuneak eta norabidea
    2 eta 6 kolore-geldiune arteko kopurua ezartzen duzu nabigatzailearen jatorrizko kolore-hautatzailea erabiliz, gero geldiune bakoitza %0–100 ardatzean kokatzen duzu barruti-graduatzaile batekin. Gradiente lineal eta konikoetarako angelu bat ere aukeratzen duzu (0–360°); gradiente erradialetarako forma aukeratzen duzu (eliptikoa edo zirkulua) eta gradientea zenbateraino hedatzen den kontrolatzen duen tamaina-gako hitza.
  2. 2
    buildCss-ek gradiente-katea muntatzen du
    Aldaketa bakoitzean, buildCss funtzio lokal batek zure parametroak CSS funtzio-dei zuzen batean kateatzen ditu — adib. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ez dago liburutegirik tartean; katea JavaScript txantiloi-logika hutsarekin eraikitzen da eta zuzenean geldiune-arraytik batzen da.
  3. 3
    Aurrebista bizia estilo lerrokatuaren bidez errendatzen da
    Muntatutako gradiente-katea zuzenean div elementu bati aplikatzen zaio estilo lerrokatu bat gisa, beraz nabigatzailearen berezko CSS motorrak aurrebista errendatzen du. Ez dago oihalik edo irudirik tartean — ikusten duzuna literalki CSS propietatea aplikatzen ari da.
  4. 4
    Kopiatzeko prest dagoen irteera lau formatutan
    Formatu-hautatzaile batek gradiente-kate bera CSS soilera (background: ...), CSS-eta-atzeraldi-solido-blokera, Tailwind balio arbitrario klasera, edo SCSS aldagai deklaraziora bihurtzen du. Kopiatu klikatzeak hautatutako irteera arbelera idazten du navigator.clipboard.writeText bidez. Uneko gradientea ere URL hash-ean kodetzen da, beraz markatu edo parteka dezakezu.

Erlazionatutako tresnak

🟦

CSS Sarearen Sortzeaila

Diseinatu ikustoki batean CSS sareak — pistak, unitateak eta tarteak — eta kopiatu sortutako CSS eta HTML.

Probatu
↔️

CSS Flexbox Sortzeaila

Esperimentatu flex norabidea, bilketa, justifikazioa eta lerroaketan zuzeneko elementuetan — eta kopiatu CSS.

Probatu
🧮

Matrize Kalkulagailua

Batu, kendu, biderkatu, iraulki, alderantzikatu eta murriztu matrizeak, baita determinantea, heina, balio propioak eta Ax = b ebatzi ere — 8×8 arte, ukitu batez kopiatuz. Doakoa eta pribatua.

Probatu

Maiz egiten diren galderak