Razvoj / CSS
Generator CSS gradijenata
Dizajnirajte linearni, radijalni ili konusni gradijent uz pregled uživo, proizvoljan broj tačaka boje i unapred podešene opcije, a zatim kopirajte CSS.
Generator CSS gradijenata: Generator zapisuje deklaraciju background koju pregledač koristi za prikazani gradijent: linear-gradient sa uglom, radial-gradient sa krugom ili elipsom koja polazi iz centra, ili conic-gradient koji se širi oko centra od početnog ugla. Svaki gradijent sadrži svoje tačke boje po redosledu. Jednobojna pozadina se navodi prva kao rezervna opcija za pregledače koji su prestari za prikaz gradijenata. Nova boja dodaje se u najširi razmak i meša se od boja svojih suseda, kako gradijent ne bi imao nagli prelaz. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.
- Kategorija
- Alatke za programere
- Pokretanja
- U vašem pregledaču
- Trošak
- Besplatno · bez registracije
- Dostupnost
- Spremno za upotrebu
U potpunosti radi u vašem pregledaču
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Prvi red je puna boja za veoma stare pregledače; svi savremeni pregledači koriste gradijent iz drugog reda.
Unapred podešene vrednosti
Gradijenti koji izgledaju glatko
Preliv između dve veoma različite nijanse, kao što su plava i žuta, u sredini prolazi kroz zagasitosivu boju. Dodavanje međutačke sa svetlijom bojom održava živost preliva. Gradijentima između susednih nijansi, kao što su narandžasta i roze, pomoć retko treba.
Izaberite ili proverite boje pomoću konvertora boja, a kartici dodajte dubinu pomoću generatora senke okvira.
Tekst na gradijentu
Proverite da li je tekst čitljiv na oba kraja gradijenta, a ne samo u sredini. Tamniji gradijent s belim tekstom ili suptilan gradijent iza tamnog teksta bezbedniji su od jarke duge.
Kako se koristi
- Izaberite unapred podešenu opciju ili odaberite linearni, radijalni ili konusni gradijent.
- Podesite ugao i prilagodite boje i njihove položaje; dodajte boju za još tačaka.
- Kopirajte CSS u svoju tabelu stilova.
Privatnost i ograničenja
Sve se izvršava u vašem pregledaču; poslednji gradijent čuva se samo u ovom pregledaču.
Srodne alatke
Često postavljana pitanja
Šta znači ugao kod linearnog gradijenta?
0deg ide odozdo nagore, 90deg sleva nadesno, 180deg odozgo nadole, a 270deg zdesna nalevo. Gradijent se iscrtava u tom smeru, pa 135deg ide od gornjeg levog ugla ka donjem desnom.
Šta je tačka boje?
To su boja i položaj, od 0% do 100% duž gradijenta, na kojem se ta boja tačno pojavljuje. Između dve tačke boje se mešaju; kada dve tačke postavite na isti položaj, dobićete oštru ivicu umesto prelaza, što se koristi za pravljenje pruga.
Po čemu se konusni gradijent razlikuje od radijalnog?
Radijalni gradijent menja boju od centra ka spolja, u prstenovima. Konusni gradijent menja boju oko centra, poput kazaljki na satu, pa je koristan za točkove boja i kružne grafikone.
Da li su mi i dalje potrebni prefiksi -webkit-?
Ne. Svaki aktuelni pregledač podržava linear-gradient i radial-gradient bez prefiksa, a conic-gradient radi u svim njima od 2021. Rezervna boja u prvom redu namenjena je samo mnogo starijim pregledačima.
Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban