Preskoči na glavni sadržaj
LibraTool logoLibraTool

Generator CSS gradijenata — besplatno

Kreirajte linearne, radijalne i konične CSS gradijente s živim pregledom. Kopirajte CSS jednim klikom.

Radi offline nakon učitavanja
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Izbjegava sive sredine između vrlo različitih boja. Dodaje običan sRGB redak kao rezervu za starije preglednike.

0%
100%

Unaprijed postavljeni

Uobičajene namjene

  • Kreirajte gradijente za glavne odjeljkeDizajnirajte pozadine gradijenta na cijeloj stranici za glavne odjeljke stranica i dovodne stranice.
  • Kreirajte gumbe i CTA gradijenteDizajnirajte zanimljive pozadine gumba sa gradijentima za apele na akciju koji se ističu.
  • Kreirajte gradijentne pozadine za karticeDizajnirajte gradijentno ispunjavanje za kartice, modalne prozore, bočne stupce i pozadine UI komponenti.
  • Kreirajte gradijente za grafiku društvenih mrežaDizajnirajte živahe pozadine gradijenta za Instagram objave, YouTube minijature i Twitter kartice.
  • Kreirajte ljestvice boja za grafikoneGenerirajte ljestvice boja gradijenta za toplinske mape, trake napretka i vizualizacije podataka.

Kako funkcionira

Generator gradijenta gradi CSS nizove gradijenta izravno u pregledniku — bez biblioteke, bez poslužitelja, bez slanja. Ručno napisana funkcija sastavlja ispravnu sintaksu linear-gradient, radial-gradient ili conic-gradient iz vaših zaustavljanja boja i kuta u stvarnom vremenu, zatim formatira rezultat za bilo koji izlazni cilj koji odaberete.

  1. 1
    Konfigurirajte zaustavljanja i smjer
    Postavljate između 2 i 6 zaustavljanja boja koristeći izvorni birač boja preglednika, zatim pozicionirate svako zaustavljanje duž osi 0–100% klizačem raspona. Za linearne i konusne gradijente također birate kut (0–360°); za radijalne gradijente birate oblik (elipsa ili krug) i ključnu riječ veličine koja kontrolira koliko se gradijent proteže.
  2. 2
    buildCss sastavlja niz gradijenta
    Pri svakoj promjeni, lokalna funkcija buildCss spaja vaše parametre u ispravan CSS poziv funkcije — npr. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nijedna biblioteka nije uključena; niz se gradi jednostavnom logikom JavaScript predloška i spaja izravno iz niza zaustavljanja.
  3. 3
    Pregled uživo renderira se putem ugrađenog stila
    Sastavljeni niz gradijenta primjenjuje se izravno na div element kao ugrađeni stil pozadine, tako da vlastiti CSS mehanizam preglednika renderira pregled. Nema platna ni slike — ono što vidite je doslovno primijenjeno CSS svojstvo.
  4. 4
    Izlaz spreman za kopiranje u četiri formata
    Birač formata pretvara isti niz gradijenta u obični CSS (background: ...), CSS blok s rezervnom čvrstom bojom, Tailwind klasu proizvoljne vrijednosti ili SCSS deklaraciju varijable. Klik na Kopiraj zapisuje odabrani izlaz u međuspremnik putem navigator.clipboard.writeText. Trenutačni gradijent također se kodira u URL hashu tako da ga možete spremiti u knjižne oznake ili podijeliti.

Srodni alati

🟦

CSS Grid generator

Vizualno kreirajte CSS grid — tragove, jedinice i razmake — i kopirajte generirani CSS i HTML.

Isprobajte
↔️

CSS Flexbox generator

Eksperimentirajte sa flex smjerom, zamatanjem, poravnavanjem i rastezanjem na Live stavkama — i kopirajte CSS.

Isprobajte
🧮

Kalkulator matrica

Zbrajajte, oduzimajte, množite, transponirajte, invertirajte i reducirajte matrice, uz determinantu, rang, svojstvene vrijednosti i rješavanje Ax = b — do 8×8, s kopiranjem jednim dodirom. Besplatno i privatno.

Isprobajte

Često postavljana pitanja