Generator CSS gradijenta

Kako koristiti generator CSS gradijenta

1. Odaberi Vrstu gradijenta: Linearni, Radijalni ili Konusni. Veliki pregled na vrhu ažurira se uz svaku promjenu.
2. Kod linearnog gradijenta postavi Kut klizačem ili ga upiši u stupnjevima (90° ide slijeva udesno, 180° odozgo prema dolje). Kod konusnog gradijenta kut je mjesto na kojem počinje zakretanje.
3. Kod radijalnog i konusnog gradijenta pomakni središte pomoću Središte X i Središte Y. Radijalni gradijent može biti Krug ili Elipsa (izbornik Oblik).
4. Uredi Točke boja. Klikni bilo gdje na traku da tamo dodaš točku s bojom koju gradijent na tom mjestu već ima ili upotrijebi Dodaj točku da popuniš najveći razmak. Povuci ručku da je pomakneš. Svaka točka ima i redak u kojem možeš odabrati njezinu boju, upisati bilo koju CSS boju, postaviti njezin Položaj (%) ili je Ukloni (gradijent zadržava najmanje dvije točke).
5. Po želji uključi Ponavljajući, odaberi Interpolaciju boja, klikni Obrni da preokreneš točke ili Nasumični gradijent za inspiraciju.
6. Kopiraj rezultat iz CSS koda gumbom Kopiraj.

Tipkovnica: fokusiraj ručku na traci, zatim tipkama sa strelicama pomiči je za 1 % (10 % uz Shift), Home i End za skok na krajeve, a Delete za uklanjanje.

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

Tri funkcije gradijenta

• linear-gradient() stapa boje duž ravne crte. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ide od indiga slijeva do ružičaste zdesna. Kutovi se mjere u smjeru kazaljke na satu od vrha: 0deg pokazuje prema gore, 90deg udesno.
• radial-gradient() zrači iz središnje točke. radial-gradient(circle at 30% 40%, …) postavlja središte 30 % od lijevog i 40 % od gornjeg ruba. Elipsa se rasteže s okvirom, a krug ostaje okrugao.
• conic-gradient() zakreće se oko središta poput kazaljki sata. conic-gradient(from 0deg at 50% 50%, …) izrađuje krugove boja, tortne grafikone i učinke vrtnje. Položaji točaka udjeli su punog okreta.

Opcija Ponavljajući koristi repeating-linear-gradient() i srodne funkcije: uzorak određen tvojim točkama ponavlja se dok se okvir ne popuni. Zadnju točku stavi znatno ispod 100 % (na primjer 20 %) da vidiš pruge ili prstenove.

Dvije točke na istom položaju stvaraju oštar rub umjesto prijelaza, tako se rade pruge i zastave. Generator u kodu drži točke poredane po položaju, kako CSS zahtijeva.

Interpolacija u sRGB-u ili OKLCH-u

Preglednici prema zadanim postavkama miješaju boje gradijenta u sRGB-u. Između dviju zasićenih boja, poput plave i žute, to često stvara dosadnu sivu ili prljavu sredinu. CSS Color Level 4 omogućuje odabir prostora interpolacije: linear-gradient(90deg in oklch, …) miješa u perceptivnom prostoru OKLCH i zadržava živu sredinu.

Uz OKLCH (glađe, uz sRGB zamjenu) 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 redak; stariji ga zanemaruju i zadržavaju prvi.

Savjeti

• U poljima točaka prihvaćaju se boje s prozirnošću, na primjer #00000080 ili rgb(0 0 0 / 50%), što je zgodno za preklapanja preko slika.
• Kod je napisan sa background. Upotrijebi background-image ako ostala svojstva pozadine postavljaš zasebno.
• Suptilni gradijenti (dvije bliske nijanse jedne boje) obično izgledaju profesionalnije od duginih prijelaza.