Generator CSS gradijenata
Što je CSS gradijent?
CSS gradijenti omogućuju prikaz glatkih prijelaza između dvije ili više boja bez korištenja slikovnih datoteka. Postoje tri vrste: linear-gradient (duž ravne linije), radial-gradient (zrači iz središnje točke) i conic-gradient (obrće se oko središnje točke). Gradijenti se koriste za pozadine, gumbe, prekrivne slojeve i dekorativne elemente.
Kako koristiti generator CSS gradijenata
-
Odaberite unaprijed postavljenu vrijednost iz uzoraka ili konfigurirajte vlastiti gradijent.
-
Odaberite vrstu gradijenta: linear, radial ili conic.
-
Podesite kut (za linear/conic) ili oblik (za radial).
-
Uredite zaustavljanja boje — promijenite boje i položaje (0–100%).
-
Dodajte ili uklonite zaustavljanja boje po potrebi.
-
Kopirajte CSS i zalijepite ga u svoju stilsku tablicu.
Često postavljana pitanja
Kako mogu napraviti prozirni gradijent? Koristite rgba() ili hsla() vrijednosti boja s alfa kanalom od 0 za potpunu prozirnost. Na primjer, zaustavka boje rgba(0,0,0,0) je potpuno prozirna crna, korisna za prelaze preko slika.
Kako mogu stvoriti čvrstu zaustavku boje (bez prijelaza)? Postavite dvije zaustavke boje na isti položaj — jednu koja se završava i jednu koja počinje na toj točki. Na primjer, crvena 50%, plava 50% stvara trenutni prijelaz s crvene na plavu na sredini bez prijelaza gradijenta.
Koji preglednici podržavaju konične gradijente? Konični gradijenti podržani su u svim modernim preglednicima (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Nisu podržani u Internet Exploreru.
Mogu li koristiti više gradijenta na istom elementu? Da. CSS background prihvaća popis odvojen zarezima. Možete slagati gradijente, kombinirati ih s pozadinama slika i neovisno kontrolirati položaj i veličinu svakog sloja.
Keywords: generator CSS gradijenta, linearni gradijent, radijalni gradijent, konični gradijent, generator CSS pozadine, birač boje gradijenta, alat za CSS gradijent