Generátor CSS prechodov
Čo je CSS prechod?
CSS prechody umožňujú zobrazovať plynulé prechody medzi dvomi alebo viacerými farbami bez použitia obrázkových súborov. Existujú tri typy: linear-gradient (pozdĺž priamky), radial-gradient (vyžarujúci zo stredového bodu) a conic-gradient (obiehajúci okolo stredového bodu). Prechody sa používajú na pozadie, tlačidlá, prekrytia a dekoratívne prvky.
Ako používať generátor CSS prechodov
-
Vyberte predvoľbu z ukážok alebo si nakonfigurujte vlastný prechod.
-
Zvoľte typ prechodu: linear, radial alebo conic.
-
Upravte uhol (pre linear/conic) alebo tvar (pre radial).
-
Editujte farebné zarážky — menite farby a pozície (0–100%).
-
Pridávajte alebo odstraňujte farebné zarážky podľa potreby.
-
Skopírujte CSS a vložte ho do svojej šablóny štýlov.
Často kladené otázky
Ako vytvorím priehľadný gradient? Používajte farby rgba() alebo hsla() s alpha kanálom 0 pre úplnú priehľadnosť. Napríklad, zastávka farby rgba(0,0,0,0) je úplne priehľadná čierna, užitočná pre prechodové vrstvy na obrázkoch.
Ako vytvorím pevnú zastávku farby (bez prechodu)? Umiestnite dve zastávky farby na rovnakú pozíciu — jednu končiacu a jednu začínajúcu v tom bode. Napríklad, červená 50%, modrá 50% vytvorí okamžité prepnutie z červenej na modrú v strede bez prechodu gradientu.
Ktoré prehliadače podporujú kónické gradienty? Kónické gradienty sú podporované vo všetkých moderných prehliadačoch (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Nie sú podporované v Internet Exploreri.
Môžem použiť viacero gradientov na rovnakom prvku? Áno. CSS background akceptuje čiarkou oddelenú zoznam vrstiev. Môžete skladovať gradienty, kombinovať ich s obrázkami na pozadí a nezávisle riadiť pozíciu a veľkosť každej vrstvy.
Keywords: generátor CSS prechodu, lineárny prechod, radiálny prechod, kužeľový prechod, generátor CSS pozadia, výber farby prechodu, nástroj pre CSS gradient