Generator CSS gradijenta

Kako koristiti generator CSS gradijenta

1. Odaberi Vrsta gradijenta: Linearni, Radijalni ili Konusni. Veliki pregled na vrhu ažurira se uz svaku promjenu.
2. Za linearni gradijent postavi Ugao klizačem ili ga upiši u stepenima (90° ide slijeva nadesno, 180° odozgo nadolje). Kod konusnog gradijenta ugao je mjesto gdje počinje zakretanje.
3. Za radijalne i konusne gradijente pomjeraj središte pomoću Središte X i Središte Y. Radijalni gradijent može biti Krug ili Elipsa (meni Oblik).
4. Uređuj Tačke boje. Klikni bilo gdje na traku da tamo dodaš tačku s bojom koju gradijent već ima u toj tački ili koristi Dodaj tačku da popuniš najveći razmak. Prevuci ručku da je pomjeriš. Svaka tačka ima i red u kojem možeš odabrati njenu boju, upisati bilo koju CSS boju, postaviti njen Položaj (%) ili je Ukloni (gradijent zadržava najmanje dvije tačke).
5. Po želji uključi Ponavljajući, odaberi Interpolacija boja, klikni Obrni da okreneš tačke ili Nasumični gradijent za inspiraciju.
6. Kopiraj rezultat iz CSS kôd dugmetom Kopiraj.

Tastatura: fokusiraj ručku na traci, pa koristi tipke sa strelicama da je pomjeriš za 1 % (10 % uz Shift), Home i End da skočiš na krajeve i Delete da je ukloniš.

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na server.

Tri funkcije gradijenta

• linear-gradient() miješa boje duž prave linije. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ide od indiga na lijevoj strani do roze na desnoj. Uglovi se mjere u smjeru kazaljke na satu od vrha: 0deg pokazuje nagore, 90deg udesno.
• radial-gradient() se širi iz središnje tačke. radial-gradient(circle at 30% 40%, …) postavlja središte 30 % od lijeve i 40 % od gornje ivice. Elipsa se razvlači s okvirom, a krug ostaje okrugao.
• conic-gradient() se okreće oko središta kao kazaljke na satu. conic-gradient(from 0deg at 50% 50%, …) pravi krugove boja, kružne grafikone i efekte učitavanja. Položaji tačaka su dijelovi punog kruga.

Opcija Ponavljajući koristi repeating-linear-gradient() i srodne funkcije: uzorak koji definišu tvoje tačke ponavlja se dok se okvir ne popuni. Postavi posljednju tačku znatno ispod 100 % (na primjer 20 %) da vidiš pruge ili prstenove.

Dvije tačke na istom položaju prave oštar rub umjesto prelaza, tako se prave pruge i zastave. Generator tačke u kôdu drži poredane po položaju, kako CSS zahtijeva.

sRGB ili OKLCH interpolacija

Preglednici po zadanim postavkama miješaju boje gradijenta u sRGB-u. Između dvije zasićene boje, poput plave i žute, to često daje bljedunjavu sivu ili mutnu sredinu. CSS Color Level 4 omogućava da odabereš prostor interpolacije: linear-gradient(90deg in oklch, …) miješa u perceptualnom OKLCH prostoru i čuva živu sredinu.

Uz OKLCH (glađe, uz sRGB rezervu) alat piše dvije deklaracije background: prvo klasičnu sRGB verziju, zatim OKLCH. Preglednici koji podržavaju prostore interpolacije (Chrome i Edge 111+, Safari 16.2+, Firefox 127+) koriste drugi red; stariji ga zanemaruju i zadržavaju prvi.

Savjeti

• Boje s prozirnošću prihvataju se u poljima tačaka, na primjer #00000080 ili rgb(0 0 0 / 50%), što je zgodno za slojeve preko slika.
• Kôd je napisan svojstvom background. Koristi background-image ako ostala svojstva pozadine postavljaš zasebno.
• Suptilni gradijenti (dvije bliske nijanse jedne boje) obično izgledaju profesionalnije od duginih prelaza.