Liigu põhisisu juurde
LibraTool logoLibraTool

CSS-gradiendi generaator tasuta

Loo lineaarseid, radiaalseid ja koonilisi CSS-gradiendid reaalajas eelvaatega. Kopeeri CSS ühe klõpsuga.

Töötab võrguühenduseta pärast laadimist
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Väldib hallide vahepunktide teket väga erinevate värvide vahel. Lisab vanemate brauserite jaoks varuvariandina tavalise sRGB rea.

0%
100%

Eseaded

Levinud kasutusviisid

  • Looge eritegelase jaotistele gradientidKujundage terve lehe gradiendi taustapildid eritegelase jaotistele ja maandumielehtedele.
  • Looge gradiendi nupud ja CTA-dKujundage silmapaistvad gradiendi nupukaustused tegevuskutsungitele, mis eristuvad.
  • Looge kaartidele gradiendi taustapildidKujundage gradiendi täitmised kaartidele, modaalsetele dialoogidele, külgjoonestele ja kasutajaliidese komponentide taustapillidele.
  • Looge sotsiaalmeediae graafikale gradientidKujundage elava gradiendi taustapildid Instagrami postitustele, YouTube pisipiltidele ja Twitteri kaartidele.
  • Looge diagrammidele värvuskaaladLooge gradiendi värvuskaalad kuumkaartidele, edenemise ribadele ja andmete visualiseeringule.

Kuidas see töötab

Gradiendigeneraator ehitab CSS gradiendistringe otse brauseris — teeki, servet ega üleslaadimist pole. Käsitsi kirjutatud funktsioon koostab õige linear-gradient, radial-gradient või conic-gradient süntaksi su värvipeatuste ja nurga alusel reaalajas, vormindades seejärel tulemuse mis tahes väljundsihtmärgi jaoks, mille valid.

  1. 1
    Konfigureeri peatused ja suund
    Sead 2 kuni 6 värvipeatust, kasutades brauseri natiivset värvivalijat, seejärel positsioneerid iga peatuse 0–100% telje ulatuses vahemikuliuguriga. Lineaarsete ja kooniliste gradientide jaoks valid ka nurga (0–360°); radiaalsete gradientide jaoks valid kuju (ellips või ring) ja suuruse märksõna, mis kontrollib, kui kaugele gradient ulatub.
  2. 2
    buildCss koostab gradiendi stringi
    Igal muudatusel liidab kohalik buildCss funktsioon su parameetrid õigeks CSS funktsioonikutseks — nt linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ühtegi teeki pole kaasatud; string ehitatakse lihtsa JavaScripti mallimehhanismiga ja liidetakse otse peatuste massiivist.
  3. 3
    Reaalajas eelvaade renderdub reasisese stiili kaudu
    Koostatud gradiendistring rakendatakse otse div-elemendile reasisese taustastiilina, nii et brauseri enda CSS-mootor renderdab eelvaate. Lõuendit ega pilti pole kaasatud — see, mida näed, on sõna-sõnalt rakendatud CSS-omadus.
  4. 4
    Kopeerimisvalmis väljund neljas vormingus
    Vormingu selektor teisendab sama gradiendistringi lihtsaks CSS-iks (background: ...), CSS-plokiks koos tahke tagavaraga, Tailwindi suvaväärtuse klassiks või SCSS muutuja deklaratsiooniks. Kopeeri klõpsamine kirjutab valitud väljundi lõikelauale navigator.clipboard.writeText'i kaudu. Praegune gradient kodeeritakse ka URL-hašisse, nii et saad selle järjehoidjatesse lisada või jagada.

Seotud tööriistad

🟦

CSS Ruudustiku generaator

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Proovi järele
↔️

CSS Flexboxi generaator

Eksperimendeerige painde suunda, mähkimist, õigustamist ja joondamist otseülekande üksustes — ja kopeerige CSS.

Proovi järele
🧮

Maatrikskalkulaator

Maatriksite liitmine, lahutamine, korrutamine, transponeerimine, pööramine ja taandamine, lisaks determinant, astak, omaväärtused ja Ax = b lahendamine — kuni 8×8, ühe puudutusega kopeerimisega. Tasuta ja privaatne.

Proovi järele

Korduma kippuvad küsimused