Klikněte pro přidání bodu na náhodné pozici. Přetáhněte pro přesun. Klik na bod otevře nastavení. Max 12 bodů.
CSS kód
Fallback (starší prohlížeče)
Tailwind CSS
Export
Jak generátor CSS gradientů použít
- Vyberte typ gradientu — lineární, radiální, kuželový nebo mesh — pomocí tabů nahoře.
- Upravte barvy kliknutím na zarážky v barevné liště, nebo u mesh gradientu klikněte na plátno pro přidání barevných bodů.
- Nastavte úhel, pozici středu a barevný prostor interpolace (sRGB, OKLCH, OKLab) pro přesný vzhled přechodu.
- Zkopírujte vygenerovaný CSS kód tlačítkem Kopírovat, nebo stáhněte gradient jako PNG či SVG soubor.
Co jsou CSS gradienty a k čemu slouží
CSS gradienty jsou plynulé barevné přechody vytvořené čistě v kódu bez potřeby obrázků. Prohlížeč je vykresluje v reálném čase, takže se dokonale přizpůsobí jakékoli velikosti obrazovky. Na webu se používají pro pozadí sekcí, tlačítek, karet a dalších prvků — dodávají designu hloubku a vizuální zajímavost bez zvýšení velikosti stránky.
Existují čtyři hlavní typy: lineární (barvy přecházejí podél přímky), radiální (z jednoho bodu do kruhu), kuželový (barvy se točí kolem středu) a mesh gradient (volné rozložení barevných bodů). Každý typ má jiné využití — lineární se hodí na pozadí a pruhy, radiální na spotlight efekty, kuželový na grafy a indikátory.
Moderní barevné prostory: OKLCH a OKLab
Tradiční RGB míchání barev často vytváří nežádoucí šedé nebo matné tóny uprostřed přechodu — typicky při přechodu mezi komplementárními barvami. Moderní barevné prostory OKLCH a OKLab tento problém řeší. Interpolují barvy tak, jak je vnímá lidské oko, takže přechody jsou živější a přirozenější.
CSS syntaxe linear-gradient(in oklch, ...) je podporována ve všech moderních prohlížečích od roku 2023. Náš generátor automaticky vytváří i fallback verzi pro starší prohlížeče, která aproximuje oklch interpolaci pomocí více barevných zarážek v sRGB prostoru.
Mesh gradienty — volná hra s barvami
Mesh gradient je nejsvobodnější typ barevného přechodu. Místo přímky nebo kruhu rozmístíte barevné body libovolně po plátně a barvy se mezi nimi plynule prolínají. Výsledkem jsou organické, neotřelé kompozice, které se často používají v moderním UI designu, na pozadí landing pages nebo jako grafické prvky.
CSS zatím nemá nativní mesh gradient funkci, proto se technicky realizují vrstvením radiálních gradientů. Náš generátor tuto techniku používá automaticky — vy jen klikáte a přetahujete body, a CSS kód se generuje na pozadí.