Ručno pisanje sintakse gradijenta zna biti nezgodno: ugao, redosled tačaka i procentualne pozicije međusobno utiču jedni na druge, a jedna jedina greška u kucanju tiho pokvari celu background deklaraciju. Ovaj generator drži prikaz i kod potpuno usklađenim - ono što vidite je bajt po bajt isti CSS koji kopirate. Sve radi na strani klijenta, tako da se ništa od onoga što dizajnirate nikuda ne šalje.
Besplatan CSS Gradient Generator
Radi u celosti u pregledaču - bez otpremanja i bez registracije.
Vrsta
Tačke prelaza
CSS kod
Šta je CSS gradient generator?
CSS gradient generator je vizuelni alat koji umesto vas generiše kod za linear-gradient(), radial-gradient() ili conic-gradient(). Izaberite boje, prevucite pozicije tačaka prelaza, podesite ugao i kopirajte gotov CSS dok prikaz uživo pokazuje tačno ono što će pregledač iscrtati. Sve se dešava direktno u vašem pregledaču.
Kako se koristi
- 1Izaberite vrstu gradijenta. Izaberite linearni, radijalni ili konusni. Linearni prikazuje klizač za ugao; radijalni dodaje oblik (krug ili elipsa) i poziciju; konusni ima početni ugao i poziciju.
- 2Podesite tačke prelaza. Kliknite na svaki uzorak boje da je izaberete i prevucite klizač da pomerite tačku duž gradijenta. Dodajte do 8 tačaka ili ih smanjite na 2.
- 3Prilagodite pravac. Prevucite klizač za ugao (0 do 360 stepeni) ili izaberite ključnu reč za poziciju. Prikaz se ažurira uživo pri svakoj promeni.
- 4Kopirajte CSS kod. Kliknite na Kopiraj da preuzmete background deklaraciju, uključujući rezervni jednobojni red, i nalepite je u svoj stylesheet.
Kome je namenjen
- Front-end programeri kojima treba pozadina za hero sekciju, karticu ili dugme i žele tačan red
linear-gradient()bez učenja sintakse napamet. - Web i UI dizajneri koji prenose boje iz mokapa: vizuelno rekreiraju gradijent i gotov CSS predaju direktno razvojnom timu.
- Kreatori imejlova i landing stranica kojima treba rezervni jednobojni red kako bi se dizajn dostojanstveno prikazao u starijim klijentima - izlaz ga uključuje automatski.
- Studenti koji uče CSS i žele u realnom vremenu da vide kako ugao, tačke prelaza i vrsta gradijenta menjaju rezultat.
Česta pitanja
Da li je ovaj CSS gradient generator besplatan?
Da - potpuno besplatan, bez registracije, bez vodenih žigova, bez ograničenja. Napravite koliko god gradijenata želite i kopirajte CSS direktno u svoj projekat.
Da li se išta šalje na server?
Ne. Gradijent se gradi i prikazuje isključivo u vašem pregledaču pomoću običnog JavaScripta. Nikakve boje, kod ni podaci o korišćenju se ne šalju nikuda.
Koja je razlika između linearnog, radijalnog i konusnog gradijenta?
Linearni gradijent meša boje duž prave linije pod uglom koji izaberete. Radijalni gradijent se širi prema spolja iz centralne tačke kao krug ili elipsa. Konusni gradijent okreće boje oko centralne tačke, slično točku boja ili tortnom grafikonu.
Kako funkcionišu tačke prelaza u CSS gradijentima?
Svaka tačka povezuje boju sa pozicijom od 0% do 100% duž linije gradijenta. Pregledač glatko meša susedne tačke. Postavljanje dve tačke na istu poziciju stvara oštru ivicu umesto mešanja - korisno za pruge i efekte tortnog grafikona.
Koji pregledači podržavaju ove gradijente?
Svi moderni pregledači - Chrome, Firefox, Safari i Edge - podržavaju linear-gradient() i radial-gradient() bez prefiksa; conic-gradient() je podržan svuda od 2020. godine. Kopirani kod uključuje i jednobojni fallback za starije pregledače.
Mogu li generisani gradijent da koristim kao boju teksta?
Ne direktno - gradijenti su slike, a ne boje. Primenite gradijent kao background-image na tekstualni element, zatim dodajte background-clip: text i color: transparent kako bi gradijent providno prosijavao kroz slova.
Zašto se na mom gradijentu vide pruge (banding)?
Pruge se pojavljuju kada se dve udaljene tačke mešaju kroz dugu deonicu sličnih nijansi, otkrivajući 8-bitne korake boje. Smanjite to dodavanjem srednje tačke prelaza, skraćivanjem rastojanja mešanja ili izborom boja koje se razlikuju i po svetlini, a ne samo po nijansi.