Pređi na glavni sadržaj
LibraTool logoLibraTool

Generator CSS gradijenta — besplatno

Kreirajte linearne, radijalne i konične CSS gradijente sa pregledom uživo. Kopirajte CSS jednim klikom.

Radi van mreže kada se učita
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Izbegava sive sredine između veoma različitih boja. Dodaje običan sRGB red kao rezervu za starije pregledače.

0%
100%

Unapred podešeni

Uobičajene upotrebe

  • Napravite gradijente za heroje sekcijeDizajnirajte pozadine gradijenata na celoj stranici za heroje veb-sajta i lending stranice.
  • Napravite dugmad i CTA gradijenteDizajnirajte privlačne pozadine dugmadi gradijenata za pozive na akciju koji se ističu.
  • Napravite gradijentne pozadine za karticeDizajnirajte gradijentna punjenja za kartice, modale, bočne trake i pozadine UI komponenti.
  • Napravite gradijente za grafiku na društvenim mrežamaDizajnirajte živa gradijentna pozadina za Instagram objave, YouTube minijature i Twitter kartice.
  • Napravite skale boja za grafikoneGenerišite skale gradijentnih boja za toplotne mape, progresne trake i vizuelizacije podataka.

Kako funkcioniše

Generator gradijenta gradi CSS nizove gradijenta direktno u pregledaču — bez biblioteke, bez servera, bez otpremanja. Ručno napisana funkcija sastavlja ispravnu sintaksu linear-gradient, radial-gradient, ili conic-gradient iz vaših prelaza boja i ugla u realnom vremenu, zatim formatira rezultat za bilo koji izlazni cilj koji izaberete.

  1. 1
    Podesite prelaze i pravac
    Podešavate između 2 i 6 prelaza boja koristeći prirodni birač boja pregledača, zatim pozicionirate svaki prelaz duž ose 0–100% klizačem opsega. Za linearne i konusne gradijente takođe birate ugao (0–360°); za radijalne gradijente birate oblik (elipsa ili krug) i ključnu reč veličine koja kontroliše koliko daleko se gradijent proteže.
  2. 2
    buildCss sastavlja niz gradijenta
    Pri svakoj promeni, 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 običnom JavaScript logikom šablona i spaja direktno iz niza prelaza.
  3. 3
    Pregled uživo se prikazuje preko inline stila
    Sastavljeni niz gradijenta se primenjuje direktno na div element kao inline stil pozadine, tako da sopstveni CSS mehanizam pregledača iscrtava pregled. Nema uključenog platna (canvas) ni slike — ono što vidite je doslovno CSS svojstvo koje se primenjuje.
  4. 4
    Izlaz spreman za kopiranje u četiri formata
    Birač formata pretvara isti niz gradijenta u obični CSS (background: ...), blok CSS-a sa čvrstom rezervnom bojom, Tailwind klasu proizvoljne vrednosti, ili SCSS deklaraciju promenljive. Klik na Kopiraj upisuje izabrani izlaz u privremenu memoriju preko navigator.clipboard.writeText. Trenutni gradijent se takođe kodira u URL heš tako da ga možete obeležiti ili podeliti.

Slične alatke

🟦

CSS Grid generator

Vizuelno dizajnirajte CSS mrežu — trake, jedinice i razmake — i kopirajte generisani CSS i HTML.

Isprobajte
↔️

CSS Flexbox generator

Eksperimentišite sa smerom, prelamanjem, raspodelom i poravnanjem stavki uživo — i kopirajte CSS.

Isprobajte
🧮

Kalkulator matrica

Sabirajte, oduzimajte, množite, transponujte, invertujte i redukujte matrice, plus determinanta, rang, sopstvene vrednosti i rešavanje Ax = b – do 8×8, sa kopiranjem jednim dodirom. Besplatno i privatno.

Isprobajte

Česta pitanja