Generator CSS gradijenata

Ovaj CSS generator gradijenata gradi linearne i radijalne gradijente od boja koje kontrolirate, s pregledom uživo i pozadinskom deklaracijom spremnom za lijepljenje. Povucite graničnike duž trake, postavite kut ili oblik i CSS se trenutno ažurira.

Sve se pokreće u vašem pregledniku prema bojama i postavkama koje odaberete, tako da se ništa ne učitava i možete kopirati rezultat i koristiti ga izvan mreže.

Linearni gradijent stapa boje duž ravne linije, a kut postavlja njegov smjer: 0 stupnjeva pokazuje prema gore, 90 stupnjeva pokazuje udesno, 180 stupnjeva pokazuje dolje. Radijalni gradijent se stapa prema van od središta, kao krug ili elipsa.

Obje su standardne CSS vrijednosti, napisane kao linear-gradient() i radial-gradient(), i obje koriste isti popis granica boja, tako da promjena vrste zadržava vaše boje i samo mijenja način na koji se šire.

Svaki graničnik boje je boja smještena na poziciji od 0% do 100%. Gradijent se glatko stapa među susjedne točke, tako da pozicija točke kontrolira gdje će njena boja biti vrhunska i koliko brzo će izblijediti u sljedeću.

Dodajte onoliko stanica koliko vam je potrebno za izradu gradijenata u više boja, povucite ih za fino podešavanje stapanja ili kliknite traku da ispustite novu stanicu gdje želite. Dva zaustavljanja je minimum koji je potreban za gradijent.

Kopirajte generirani kod i zalijepite ga kao pozadinu bilo kojeg elementa, poput odjeljka, kartice ili gumba. Moderni preglednici podržavaju linearni gradijent i radijalni gradijent bez prefiksa dobavljača, tako da vrijednost funkcionira kakva jest.

Budući da je gradijent samo vrijednost, možete ga koristiti bilo gdje gdje se očekuje pozadinska slika, slojiti ga preko pune boje kao zamjenu ili ponovno upotrijebiti iste graničnike u linearnoj i radijalnoj verziji za dosljedan izgled.