CSS Gradient Generator

Što su CSS gradijenti?

CSS gradijenti stvaraju glatke, kontinuirane prijelaze između dvije ili više boja bez korištenja slika. Prikazuju ih preglednik nativno, što znači da se skaliraju na bilo koju rezoluciju, učitavaju trenutačno i ne generiraju HTTP zahtjeve. Gradijenti su jedan od najmoćnijih alata u modernom CSS-u za stvaranje vizualno bogatih pozadina, gumba i dekorativnih elemenata.

Postoje dvije glavne vrste CSS gradijenata: linearni gradijenti koji se prelaze duž ravne linije, i radijalni gradijenti koji se šire prema van iz središnje točke. Treća vrsta, konični gradijenti, proteže se oko središnje točke poput kotača boja. Ovaj alat fokusira se na linearne i radijalne gradijente koji pokrivaju veliku većinu dizajnerskih potreba.

CSS sintaksa gradijenata

Funkcija linear-gradient() prima smjer (kut ili ključnu riječ) praćenu zaustavljanjima boja. Osnovna sintaksa je background: linear-gradient(kut, boja1 pozicija1, boja2 pozicija2). Kut je u stupnjevima — 0deg ide od dna prema vrhu, 90deg s lijeva udesno, a 180deg s vrha prema dnu. Možete dodati koliko god zaustavljanja boja želite.

Radijalni gradijenti koriste radial-gradient(oblik veličina na poziciji, boja1, boja2). Oblik može biti circle ili ellipse. Ključne riječi za veličinu (closest-side, farthest-corner itd.) kontroliraju dokle se gradijent proteže. Ako su izostavljene, preglednik koristi zadane vrijednosti koje obično izgledaju ispravno.

Kako koristiti ovaj alat

Odaberite boje pomoću birača boja, podesite kut gradijenta klizačem ili unosom vrijednosti u stupnjevima i dodajte ili uklonite zaustavljanja boja po potrebi. Alat generira CSS kod u stvarnom vremenu. Kliknite gumb za kopiranje da biste kopirali potpuno CSS pravilo u međuspremnik, zatim ga zalijepite u svoju stilsku tablicu.

Dizajnerski savjeti za gradijente

Suptilni gradijenti izgledaju profesionalnije od dramatičnih. Pomak od 10–20 stupnjeva u tonu između dvije bliske boje stvara elegantan, moderan izgled. Izbjegavajte kombinirati više od tri boje osim ako namjerno ne stvarate efekt duge. Velike površine dobro izgledaju s mekim gradijentima, dok manji UI elementi poput gumba mogu podnijeti smjele prijelaze.

Za dizajne tamnog načina rada, gradijentni slojevi na tamnim pozadinama dodaju dubinu bez odvlačenja pažnje. Koristite poluprozirna zaustavljanja boja (rgba ili hsla) za stvaranje staklastih efekata. Slažite više gradijenata koristeći zareze u property background za složene kompozicije.

Razmatranja o performansama

CSS gradijenti su GPU-ubrzani i iznimno učinkoviti — daleko bolji od učitavanja slika gradijenata. Međutim, vrlo složeni gradijenti s mnogo zaustavljanja boja mogu uzrokovati manje razlike u prikazivanju između preglednika. Uvijek testirajte gradijente u Chromeu, Firefoxu i Safariju. Moderni preglednici podržavaju gradijente bez vendor prefiksa, pa -webkit-linear-gradient više nije potreban.

Često postavljana pitanja

Mogu li animirati CSS gradijente?

CSS ne može izravno animirati vrijednosti gradijenata koristeći transition. Međutim, možete animirati background-position preveilikog gradijenta, koristiti @property za animaciju prilagođenih svojstava unutar gradijenata, ili prelaziti između dva gradijenta koristeći opacity na pseudo-elementima.

Koja je razlika između linearnih i radijalnih gradijenata?

Linearni gradijent prelazi boje duž ravne linije pod navedenim kutom. Radijalni gradijent prelazi prema van iz središnje točke u kružnom ili eliptičnom obliku. Odaberite linearni za pozadine i bannere, a radijalni za efekte reflektora ili isticanje gumba.