Psát syntaxi gradientu ručně je zapeklité: úhel, pořadí zastávek a procentuální pozice se vzájemně ovlivňují a jediný překlep tiše rozbije celý background. Tento generátor drží náhled a kód dokonale sesynchronizované - co vidíte, je do posledního znaku přesně ten CSS kód, který kopírujete. Běží čistě na straně prohlížeče, takže nic z toho, co navrhnete, nikam neodesíláte.
Bezplatný CSS Gradient Generator
Běží celé ve vašem prohlížeči - nic se nenahrává, žádná registrace.
Typ
Barevné zastávky
CSS kód
Co je CSS gradient generator?
CSS gradient generator je vizuální nástroj, který za vás sestaví kód linear-gradient(), radial-gradient() nebo conic-gradient(). Vyberete barvy, přetáhnete zastávky na požadovanou pozici, nastavíte úhel a hotový CSS kód se objeví okamžitě, zatímco živý náhled ukazuje přesně to, co prohlížeč vykreslí. Vše běží přímo v prohlížeči.
Jak na to
- 1Vyberte typ gradientu. Zvolte lineární, radiální nebo kónický. Lineární zobrazí posuvník úhlu; radiální přidá tvar (kruh nebo elipsa) a pozici; kónický má počáteční úhel a pozici.
- 2Nastavte barevné zastávky. Klikněte na každý vzorník a vyberte barvu, pak přetažením posuvníku posuňte zastávku po dráze gradientu. Přidejte až 8 zastávek nebo je odeberte až na 2.
- 3Upravte směr. Přetáhněte posuvník úhlu (0-360 stupňů) nebo vyberte klíčové slovo pozice. Náhled se aktualizuje živě při každé změně.
- 4Zkopírujte CSS kód. Klikněte na Copy a získejte deklaraci background včetně záložního řádku s plnou barvou, kterou vložíte do svého stylopisu.
Pro koho je nástroj
- Front-end vývojáři, kteří potřebují pozadí pro hero sekci, kartu nebo tlačítko a chtějí přesný řádek
linear-gradient(), aniž by museli znát syntaxi zpaměti. - Weboví a UI designéři ladící mockup: gradient vizuálně zrekonstruují a vygenerovaný CSS předají rovnou vývojářskému týmu.
- Tvůrci e-mailů a landing page, kteří potřebují záložní řádek s plnou barvou, aby se design v starších klientech zobrazil rozumně - výstup ho přidává automaticky.
- Studenti učící se CSS, kteří chtějí v reálném čase vidět, jak úhel, barevné zastávky a typ gradientu mění výsledný vzhled.
Časté dotazy
Je tento CSS gradient generator zdarma?
Ano - 100% zdarma, bez registrace, bez vodoznaku, bez omezení. Vytvořte si tolik gradientů, kolik chcete, a zkopírujte CSS kód rovnou do svého projektu.
Odesílá se něco na server?
Ne. Gradient se sestavuje i zobrazuje v náhledu výhradně v prohlížeči pomocí obyčejného JavaScriptu. Žádné barvy, kód ani data o používání se nikam neposílají.
Jaký je rozdíl mezi lineárním, radiálním a kónickým gradientem?
Lineární gradient prolíná barvy podél přímky pod úhlem, který zvolíte. Radiální gradient vyzařuje ven ze středového bodu jako kruh nebo elipsa. Kónický gradient stáčí barvy kolem středového bodu, podobně jako barevné kolo nebo koláčový graf.
Jak fungují barevné zastávky u CSS gradientů?
Každá zastávka spojuje barvu s pozicí od 0 % do 100 % podél linie gradientu. Prohlížeč mezi sousedními zastávkami plynule prolíná barvy. Umístíte-li dvě zastávky na stejnou pozici, vznikne ostrá hrana místo prolnutí - hodí se pro pruhy nebo efekt koláčového grafu.
Které prohlížeče tyto gradienty podporují?
Všechny moderní prohlížeče - Chrome, Firefox, Safari i Edge - podporují linear-gradient() a radial-gradient() bez prefixu; conic-gradient() je podporován všude od roku 2020. Zkopírovaný kód navíc obsahuje záložní barvu pro starší prohlížeče.
Můžu vygenerovaný gradient použít jako barvu textu?
Ne přímo - gradienty jsou obrázky, ne barvy. Aplikujte gradient jako background-image na textový element a přidejte background-clip: text a color: transparent, aby gradient prosvítal skrz jednotlivá písmena.
Proč se v mém gradientu objevují pruhy (banding)?
Pruhování se objeví, když se dvě vzdálené zastávky prolínají přes dlouhý úsek podobných odstínů a odhalí 8bitové barevné kroky. Omezíte ho přidáním další zastávky mezi ně, zkrácením délky přechodu nebo výběrem barev, které se liší jak jasem, tak odstínem.