Izaberi boje, pomeri tačke, podesi ugao i kopiraj CSS gradijent koji možeš direktno da ubaciš u stilove. Pregled se osvežava čim nešto promeniš, pa vidiš tačan rezultat pre nego što diraš kod. Ništa se ne šalje na server — sve radi u tvom pregledaču.
Kako radi
Linearni gradijent stapa boje duž prave linije. Ugao određuje smer te linije: 0deg vodi prelaz nagore, 90deg s leva na desno, 180deg nadole, a 270deg s desna na levo. Svaka tačka boje ima poziciju od 0% do 100% koja govori gde na liniji ta boja pada; pregledač glatko interpolira boje između susednih tačaka. Radijalni gradijent umesto toga stapa boje ka spolja iz centralne tačke u prstenovima, zbog čega se ugao na njega ne odnosi — ovaj alat koristi jednostavan kružni radijalni oblik.
Rezultat je jedna `background` deklaracija koja koristi standardnu funkciju `linear-gradient()` ili `radial-gradient()`. Obe su već godinama podržane bez prefiksa u svim aktuelnim pregledačima, pa za moderne ciljeve više ne trebaš `-webkit-` ni `-moz-` verzije. Pošto gradijent iscrtava pregledač umesto da se preuzima, ne košta dodatni mrežni zahtev i skalira se na bilo koju veličinu elementa bez zamućenja.
Primeri iz prakse
Pozadina za hero sekciju u dve boje
Linearni gradijent od indigo #6366f1 na 0% do roze #ec4899 na 100% pod uglom 90deg daje traku s leva na desno koja dobro stoji iza naslova na početnoj strani. Promeni ugao na 135deg za dijagonalu koja vodi pogled ka donjem desnom uglu.
Suptilni gradijent na dugmetu
Za dugme s utiskom dubine drži boje bliske: #3b82f6 na 0% do #2563eb na 100% pod uglom 180deg. Blagi prelaz odozgo nadole deluje kao dubina, a ne kao duga. Za hover verziju samo pomeri obe boje za nijansu tamnije.
Mekan radijalni sjaj
Prebaci na radijalni i idi od #fef3c7 na 0% do #f59e0b na 100% za toplo kružno svetlo, korisno kao pozadina kartice ili iza ikonice. Svetlija boja stoji u centru i tamni ka ivicama.
Česta pitanja
Šta znače stepeni ugla?
Ugao određuje smer kretanja linearnog gradijenta. 0deg ide odozdo nagore, 90deg s leva na desno, 180deg odozgo nadole, a 270deg s desna na levo. Vrednosti između daju dijagonale — 45deg vodi ka gornjem desnom uglu.
Zašto je ugao onemogućen za radijalne gradijente?
Radijalni gradijent se širi ka spolja iz centralne tačke u koncentričnim prstenovima, a ne duž prave linije, pa nema jedinstven smer za ugao. Ovaj alat pravi kružni radijalni gradijent, gde prva boja stoji u centru, a poslednja dopire do ivice.
Mogu li da koristim više od dve boje?
Da. Dugmetom Dodaj boju ubacuješ dodatne tačke, do pet. Svaka tačka ima svoju poziciju, pa možeš staviti treću boju na 50% da napraviš izraženu srednju traku ili neravnomeran prelaz.
Šta kontroliše procenat pozicije?
Određuje gde na gradijentu je boja potpuno svoja. Dve tačke na 0% i 100% šire prelaz preko celog elementa. Pomeranje tačke na 20% sabija tu boju u prvu petinu i rasteže prelaz ka sledećoj boji preko ostatka.
Mogu li da napravim deo gradijenta providnim?
Birač boja ovde radi u punom heksu, ali kopirani CSS možeš ručno da izmeniš i koristiš rgba() ili osmocifreni heks sa alfa kanalom, na primer rgba(0,0,0,0) kao jednu tačku. Postepeno stapanje boje u providno je čest način da se gradijent preklopi preko fotografije.
Da li mi i dalje trebaju prefiksi poput -webkit-?
Ne za aktuelne pregledače. linear-gradient() i radial-gradient() bez prefiksa godinama su podržani u Chrome, Firefox, Safari i Edge. Prefikse -webkit- dodaješ samo ako moraš da podržiš vrlo stari mobilni Safari ili slične zastarele engine-e.
Gradijent mi se ne prikazuje — u čemu je problem?
Najčešći uzroci su primena na element bez visine ili širine, ili neko drugo pravilo pozadine koje ga pregazi. Proveri da element ima veličinu, da ova deklaracija nije prepisana kasnije u kaskadi i da je svojstvo background ili background-image.
Po čemu se CSS gradijent razlikuje od slike gradijenta?
CSS gradijent pregledač crta iz tekstualnog pravila, pa je sićušan, uvek oštar na svakoj veličini i lak za izmenu. Izvezeni PNG ili JPG je fajl fiksne rezolucije koji dodaje preuzimanje i može delovati zrnasto pri skaliranju. Za ravne prelaze boja CSS je gotovo uvek bolji izbor.
Da li da koristim background ili background-image?
Ovaj alat ispisuje skraćeno svojstvo background, što je samo po sebi u redu. Ako element već ima boju pozadine koju želiš da zadržiš kao rezervu, koristi background-image za gradijent da boja ostane ispod.
Da li su CSS gradijenti loši za performanse?
Ne. Jeftini su za iscrtavanje i ne dodaju mrežne zahteve. Vrlo veliki gradijenti koji se animiraju u svakom frejmu mogu malo koštati na slabijim uređajima, ali statična pozadina s gradijentom nema značajan uticaj na performanse.
Mogu li da animiram gradijent?
Pregledači ne mogu glatko da prelaze između definicija gradijenta kao kod pune boje. Za animaciju se obično pravi prevelik gradijent i pomera se njegov background-position, ili se stapaju dva sloja postavljena jedan preko drugog. Statični CSS iz ovog alata je polazna tačka.
Zašto mi se boje vide u trakama?
Vidljivi koraci između boja obično dolaze od premale razlike u boji preko previše piksela, ili od ekrana male dubine boje. Približavanje tačaka ili izbor boja s većim kontrastom smanjuje efekat; na nekim ekranima ne može se u potpunosti izbeći.
Da li se nešto šalje na server kad ovo koristim?
Ne. Gradijent se u potpunosti pravi u tvom pregledaču iz kontrola na stranici. Nijedna boja, kod ni slika ne napuštaju tvoj uređaj.
Srodni alati
Generator CSS senke
Napravite CSS box-shadow klizačima i kopirajte kod, uz živi pregled.
Alati za programere
CSS minifikacija
Minifikujte CSS u pregledaču — uklonite komentare i razmake da smanjite fajl, uz poređenje veličine pre i posle. Ništa se ne šalje.
Alati za programere
Konverter boja
Pretvarajte boje između HEX, RGB i HSL, sa podrškom za providnost i živim uzorkom. Radi u pregledaču.
Alati za programere
Provera kontrasta boja
Proverite WCAG odnos kontrasta između boje teksta i pozadine, sa AA i AAA prolazom ili padom.
Alati za programere
PX u REM konverter
Pretvarajte između px i rem za bilo koju osnovnu veličinu fonta, uz brzu referentnu tabelu. Za rad sa CSS-om.
Alati za programere
JSON formatiranje
Ulepšajte, proverite ili minifikujte JSON u pregledaču — uz jasne poruke o greškama. Ništa se ne šalje.
Alati za programere