Ručno pisanje sintakse gradijenta zna biti nezgodno: kut, redoslijed točaka i postotne pozicije međusobno utječu jedni na druge, a jedna jedina tipfelerica tiho pokvari cijelu background deklaraciju. Ovaj generator drži prikaz i kod potpuno usklađenima - ono što vidite bajt je po bajt isti CSS koji kopirate. Sve radi na strani klijenta, pa se ništa od onoga što dizajnirate nikamo ne šalje.
Besplatni CSS Gradient Generator
Radi u cijelosti u pregledniku - bez slanja podataka i bez registracije.
Vrsta
Prijelazne točke
CSS kod
Što je CSS gradient generator?
CSS gradient generator vizualni je alat koji umjesto vas generira kod za linear-gradient(), radial-gradient() ili conic-gradient(). Odaberite boje, povucite pozicije prijelaznih točaka, postavite kut i kopirajte gotov CSS dok prikaz uživo pokazuje točno ono što će preglednik iscrtati. Sve se odvija izravno u vašem pregledniku.
Kako se koristi
- 1Odaberite vrstu gradijenta. Odaberite linearni, radijalni ili konični. Linearni prikazuje klizač kuta; radijalni dodaje oblik (krug ili elipsa) i poziciju; konični ima početni kut i poziciju.
- 2Postavite prijelazne točke. Kliknite na svaki uzorak boje da je odaberete i povucite klizač da pomaknete točku duž gradijenta. Dodajte do 8 točaka ili ih smanjite na 2.
- 3Prilagodite smjer. Povucite klizač kuta (0 do 360 stupnjeva) ili odaberite ključnu riječ za poziciju. Prikaz se ažurira uživo pri svakoj promjeni.
- 4Kopirajte CSS kod. Kliknite Kopiraj da preuzmete background deklaraciju, uključujući rezervni jednobojni redak, i zalijepite je u svoju stylesheet datoteku.
Za koga je
- Front-end developeri kojima treba pozadina za hero sekciju, karticu ili gumb i žele točan redak
linear-gradient()bez učenja sintakse napamet. - Web i UI dizajneri koji prenose boje iz mockupa: vizualno rekreiraju gradijent i gotov CSS predaju izravno razvojnom timu.
- Kreatori e-mailova i landing stranica kojima treba rezervni jednobojni redak kako bi se dizajn dostojanstveno prikazao u starijim klijentima - izlaz ga uključuje automatski.
- Studenti koji uče CSS i žele u stvarnom vremenu vidjeti kako kut, prijelazne točke i vrsta gradijenta mijenjaju rezultat.
Česta pitanja
Je li ovaj CSS gradient generator besplatan?
Da - potpuno besplatan, bez registracije, bez vodenih žigova, bez ograničenja. Napravite koliko god gradijenata želite i kopirajte CSS izravno u svoj projekt.
Šalje li se išta na poslužitelj?
Ne. Gradijent se gradi i prikazuje isključivo u vašem pregledniku pomoću običnog JavaScripta. Nikakve boje, kod ni podaci o korištenju ne šalju se nikamo.
Koja je razlika između linearnog, radijalnog i koničnog gradijenta?
Linearni gradijent miješa boje duž ravne linije pod kutom koji odaberete. Radijalni gradijent širi se prema van iz središnje točke kao krug ili elipsa. Konični gradijent okreće boje oko središnje točke, slično kotaču boja ili tortnom grafikonu.
Kako funkcioniraju prijelazne točke u CSS gradijentima?
Svaka točka povezuje boju s pozicijom od 0% do 100% duž linije gradijenta. Preglednik glatko miješa susjedne točke. Postavljanje dviju točaka na istu poziciju stvara oštar rub umjesto miješanja - korisno za pruge i efekte tortnog grafikona.
Koji preglednici podržavaju ove gradijente?
Svi moderni preglednici - Chrome, Firefox, Safari i Edge - podržavaju linear-gradient() i radial-gradient() bez prefiksa; conic-gradient() podržan je posvuda od 2020. Kopirani kod uključuje i jednobojni fallback za starije preglednike.
Mogu li generirani gradijent koristiti kao boju teksta?
Ne izravno - gradijenti su slike, a ne boje. Primijenite gradijent kao background-image na tekstualni element, zatim dodajte background-clip: text i color: transparent kako bi gradijent prosijavao kroz slova.
Zašto se na mom gradijentu vide pruge (banding)?
Pruge se pojavljuju kada se dvije udaljene točke miješaju kroz dugu dionicu sličnih nijansi, otkrivajući 8-bitne korake boje. Smanjite to dodavanjem srednje prijelazne točke, skraćivanjem udaljenosti miješanja ili odabirom boja koje se razlikuju i po svjetlini, a ne samo po nijansi.