Generátor CSS přechodů
Co je CSS přechod?
CSS přechody umožňují zobrazovat plynulé přechody mezi dvěma nebo více barvami bez použití obrázkových souborů. Existují tři typy: linear-gradient (podél přímky), radial-gradient (vyzařující ze středového bodu) a conic-gradient (obíhající kolem středového bodu). Přechody se používají pro pozadí, tlačítka, překrytí a dekorativní prvky.
Jak používat generátor CSS přechodů
-
Vyberte předvolbu z ukázek nebo si nakonfigurujte vlastní přechod.
-
Zvolte typ přechodu: linear, radial nebo conic.
-
Upravte úhel (pro linear/conic) nebo tvar (pro radial).
-
Editujte barevné zarážky — měňte barvy a pozice (0–100%).
-
Přidávejte nebo odebírejte barevné zarážky podle potřeby.
-
Zkopírujte CSS a vložte ho do svého stylopisu.
Často Kladené Otázky
Jak vytvořím průsvitný gradient? Použijte barevné hodnoty rgba() nebo hsla() s alfa kanálem 0 pro úplnou průhlednost. Například barevná zarážka rgba(0,0,0,0) je zcela průhledná černá, užitečná pro postupné slábnutí přes obrázky.
Jak vytvoří tvrdou barevnou zarážku (bez přechodu)? Umístěte dvě barevné zarážky na stejnou pozici — jednu končící a jednu začínající v tomto bodě. Například červená 50%, modrá 50% vytváří okamžitý přechod z červené na modrou v polovině bez gradientního přechodu.
Které prohlížeče podporují kónické gradienty? Kónické gradienty jsou podporovány ve všech moderních prohlížečích (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Nejsou podporovány v Internet Exploreru.
Mohu použít více gradientů na stejném prvku? Ano. CSS background přijímá čárkou oddělený seznam vrstev. Můžete vrstvit gradienty, kombinovat je s obrázky na pozadí a kontrolovat pozici a velikost každé vrstvy nezávisle.
Keywords: generátor CSS přechodu, lineární přechod, radiální přechod, kuželový přechod, generátor CSS pozadí, výběr barvy přechodu, nástroj pro CSS přechod