Besplatan Generator CSS gradijenata

Kako radi

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

1. 1
   Podesite prekide i smjer

   Postavljate između 2 i 6 prekida boje koristeći native birač boje preglednika, zatim pozicionirate svaki prekid duž ose 0–100% klizačem raspona. Za linearne i konusne gradijente takođe birate ugao (0–360°); za radijalne gradijente birate oblik (elipsa ili krug) i ključnu riječ veličine koja kontroliše koliko daleko se gradijent proteže.
2. 2
   buildCss sastavlja niz gradijenta

   Pri svakoj promjeni, lokalna funkcija buildCss spaja vaše parametre u ispravan poziv CSS 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 prekida.
3. 3
   Pregled uživo se iscrtava putem inline stila

   Sastavljeni niz gradijenta se primjenjuje direktno na div element kao inline stil pozadine, tako da vlastiti CSS mehanizam preglednika iscrtava pregled. Nema canvas-a ili slike uključene — ono što vidite je doslovno primijenjeno CSS svojstvo.
4. 4
   Izlaz spreman za kopiranje u četiri formata

   Selektor formata pretvara isti niz gradijenta u obični CSS (background: ...), CSS blok sa jednobojnim rezervnim rješenjem, Tailwind klasu proizvoljne vrijednosti, ili SCSS deklaraciju varijable. Klik na Kopiraj zapisuje odabrani izlaz u međuspremnik putem navigator.clipboard.writeText. Trenutni gradijent se takođe kodira u hash URL-a tako da ga možete sačuvati u zabilješkama ili podijeliti.

Povezani alati