Generator CSS gradijenata

Kako se koristi generator CSS gradijenata

1. Izaberi Vrsta gradijenta: Linearni, Radijalni ili Konusni. Veliki pregled na vrhu se ažurira uz svaku promenu.
2. Za linearni gradijent podesi Ugao klizačem ili ga upiši u stepenima (90° ide sleva udesno, 180° odozgo naniže). Kod konusnog gradijenta ugao je mesto gde počinje obrtanje.
3. Kod radijalnog i konusnog gradijenta pomeraj centar pomoću Centar X i Centar Y. Radijalni gradijent može biti Krug ili Elipsa (meni Oblik).
4. Uredi Tačke boje. Klikni bilo gde na traci da tu dodaš tačku sa bojom koju gradijent već ima na tom mestu ili upotrebi Dodaj tačku da popuniš najveći razmak. Prevuci ručicu da je pomeriš. Svaka tačka ima i red u kome možeš da izabereš njenu boju, upišeš bilo koju CSS boju, podesiš njen Položaj (%) ili je Ukloni (gradijent zadržava bar dve tačke).
5. Po želji uključi Ponavljajući, izaberi Interpolacija boja, klikni Obrni da preokreneš tačke ili Nasumičan gradijent za inspiraciju.
6. Kopiraj rezultat iz odeljka CSS kod dugmetom Kopiraj.

Tastatura: fokusiraj ručicu na traci, pa koristi strelice da je pomeriš za 1 % (10 % uz Shift), Home i End da skočiš na krajeve i Delete da je ukloniš.

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

Tri funkcije gradijenta

• linear-gradient() meša boje duž prave linije. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ide od indigo sa leve strane do roze sa desne. Uglovi se mere u smeru kazaljke na satu od vrha: 0deg pokazuje nagore, 90deg udesno.
• radial-gradient() zrači iz centralne tačke. radial-gradient(circle at 30% 40%, …) postavlja centar 30 % od leve ivice i 40 % od vrha. Elipsa se razvlači sa okvirom, a krug ostaje okrugao.
• conic-gradient() se obrće oko centra poput kazaljki sata. conic-gradient(from 0deg at 50% 50%, …) pravi krugove boja, kružne grafikone i efekte učitavanja. Položaji tačaka su delovi pune rotacije.

Opcija Ponavljajući koristi repeating-linear-gradient() i srodne funkcije: obrazac definisan tvojim tačkama ponavlja se dok se okvir ne popuni. Postavi poslednju tačku znatno ispod 100 % (na primer 20 %) da vidiš pruge ili prstenove.

Dve tačke na istom položaju prave oštru ivicu umesto prelaza, tako se prave pruge i zastave. Generator u kodu drži tačke sortirane po položaju, kako CSS zahteva.

sRGB ili OKLCH interpolacija

Podrazumevano pregledači mešaju boje gradijenta u sRGB-u. Između dve zasićene boje, kao što su plava i žuta, to često stvara mutnu sivu sredinu. CSS Color Level 4 omogućava da izabereš prostor interpolacije: linear-gradient(90deg in oklch, …) meša u perceptivnom prostoru OKLCH i zadržava živu sredinu.

Sa OKLCH (glatkije, sa sRGB rezervom) alat piše dve deklaracije background: prvo klasičnu sRGB verziju, pa OKLCH. Pregledači koji podržavaju prostore interpolacije (Chrome i Edge 111+, Safari 16.2+, Firefox 127+) koriste drugi red, a stariji ga ignorišu i zadržavaju prvi.

Saveti

• U poljima tačaka prihvataju se boje sa providnošću, na primer #00000080 ili rgb(0 0 0 / 50%), što je zgodno za slojeve preko slika.
• Kod je napisan sa background. Upotrebi background-image ako ostala svojstva pozadine postavljaš zasebno.
• Suptilni gradijenti (dve bliske nijanse jedne boje) obično izgledaju profesionalnije od duginih prelaza.