CSS Gradient Generator

Generiši CSS gradient kod jednostavnim odabirom boje i ugla sa pregledom u realnom vremenu

Informacije o ažuriranjimaDodan CSS gradijent generator, odaberite boje i kut te generirajte kodPogledaj vijesti o ažuriranju

Karakteristike

Pregled i kod se ažuriraju istovremeno

Izgled i CSS se mijenjaju u stvarnom vremenu pri svakoj promeni boje ili ugla

Podrška za linearne, radijalne i konusne gradijente

Detaljno postavljanje uglova, oblika i centralne pozicije za svaki tip

Prevlačenje do 10 boja za prilagodu

Pozicija boje se prilagođava prevlačenjem na traci, transparentnost klizačem

8 uzoraka i nasumična generisanja

Počni sa standardnom ili nasumičnom shemom boja i sitno je prilagodi

Kako koristiti

Odaberi vrstu

Odaberi vrstu gradijenta: linearni, radijalni ili konusni

Odaberi boje

Odaberi boju iz koda ili uzorka, koristi "Dodaj boju" za više boja i prilagodi poziciju i transparentnost

Prilagodi orijentaciju

Za linearne: postavi ugao ili koristi dugmad smera; za radijalne/konusne: odredi centralnu poziciju

Kopiraj kod

Koristi "Kopiraj" dugme da kopiraš CSS u jedan red za tvoje stilove

Primjena

Pozadina hero slike

Odredi boju pozadine vrha ili dugmadi bez pisanja koda

Odabir boja za naslove bloga

Odaberi sličnu shemu boja iz uzorka za pozadinu naslova članka

Sloj koji se nanosi preko slike

Napravi poluprozirni sloj sa nižom transparentnosću preko fotografije

Prilagoda višebojnog gradijenta

Prevlačenjem ponos malo granice između 3+ boje da ih zbližiš

Osnovno znanje

Razlika između linear, radial i conic

CSS gradijenti imaju 3 funkcije sa različitim načinima promene boja, sve se koriste u svojstvu background.

linear-gradient：linear-gradient je linearni gradijent gde se boja menja duž prave linije pod postavljenim uglom.
radial-gradient：radial-gradient je radijalni gradijent gde se boja širi od centralne pozicije kao krug ili elipsa.
conic-gradient：conic-gradient je konusni gradijent gde se boja menja u krug oko centralne pozicije u smeru kazaljke na satu.

Korespondencija uglova i ključnih reči smera

Ugao linear-gradijenta počinje na 0deg (gore prema dnu) i povećava se u smeru kazaljke na satu. Uglovi se mogu pisati i ključnim rečima "to right"; 90deg je isto kao "to right", a 180deg je isto kao "to bottom".

Način pisanja boje i transparentnosti

Zaustavna tačka boje (color stop) je pozicija u gradijentu gde boja postaje određena; 0% je početak, 100% je kraj. Na primer, "#3B82F6 0%, #8B5CF6 100%" menja boju od plave na početku prema ljubičastoj na kraju.

#RRGGBB format：#RRGGBB format je način pisanja boje gde se intenzitet crvene, zelene i plave izražava sa po 2 heksadecimalne cifre; #FF0000 je neprozirna crvena.
rgba format：rgba format je način pisanja boje sa vrednostima crvene, zelene i plave (0–255) i transparentnosti (0–1); transparentnost 0.5 znači pola prozirnu boju.