CodeKitHubCo je tento nástroj?
CSS gradienty jsou obrázky generované prohlížečem ze seznamu barev, ne soubory, které nahráváte — linear-gradient() přechází barvy podél přímky pod daným úhlem, zatímco radial-gradient() přechází barvy směrem ven ze středového bodu. Obě přijímají dva nebo více barevných bodů, každý volitelně zafixovaný na pozici podél gradientu.
Při ručním psaní se u gradientů snadno udělá jemná chyba: pořadí bodů, chybějící procenta nebo hodnota úhlu ve špatném směru (CSS úhly běží ve směru hodinových ručiček od 'to top', na rozdíl od matematických úhlů). Tento nástroj drží syntaxi mimo cestu — nastavte barvy a pozice pomocí výběrů a posuvníků, sledujte náhledový box aktualizující se v reálném čase a zkopírujte výsledné CSS, jakmile vypadá dobře.
Zdroj: CSS Images Module Level 3, W3C — specifikace definující syntaxi linear-gradient() a radial-gradient().
Proč ho používat?
- Živý náhled se okamžitě aktualizuje při každé změně barvy, pozice nebo úhlu — není potřeba obnovovat stránku, abyste viděli výsledek.
- Přepnutí mezi lineárním a radiálním gradientem jedním kliknutím; ovládání úhlu se automaticky skryje u radiálních gradientů, kde neplatí.
- Přidávejte nebo odebírejte barevné body (2 až 4) místo omezení na pevný dvoubarevný gradient.
- Každý bod má vlastní posuvník pozice, takže body nemusí být rovnoměrně rozmístěné.
- Vypisuje připravené CSS ve standardní syntaxi linear-gradient()/radial-gradient().
- Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává. Zdarma, bez registrace, funguje na mobilu.
Jak se používá
- Zvolte Lineární nebo Radiální jako typ gradientu.
- U lineárního gradientu přetáhněte posuvník úhlu — 90deg jde zleva doprava, 180deg jde shora dolů a tak dále.
- Nastavte barvu a pozici pro každý bod; první bod je počáteční barva gradientu, poslední je jeho koncová barva.
- Klikněte na '+ Přidat bod' pro přidání až 4 bodů celkem pro vícebarevný gradient, nebo na tlačítko ✕ pro odebrání jednoho (minimálně 2).
- Zkopírujte vygenerované CSS a vložte ho do deklarace background nebo background-image.
Příklad
Vstup
Lineární · Úhel: 90deg · Body: #f97316 při 0%, #ec4899 při 100%Výstup
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Gradient zleva doprava z oranžové do růžové — běžný styl pro tlačítka, bannery a úvodní pozadí.
Lineární vs. radiální gradienty
Lineární gradient přechází barvu podél přímky, řízené úhlem — užitečné pro bannery, tlačítka a směrová pozadí. Radiální gradient přechází barvu směrem ven ze středového bodu v rozšiřujících se kruzích, což se hodí pro efekty spotlightu, odznaky nebo pozadí ve stylu záře. Tento nástroj nastavuje radiální gradient standardně jako kruhový tvar vystředěný v boxu, což pokrývá nejběžnější případ radiálního použití; CSS podporuje i eliptické tvary a mimostředové pozice, pokud potřebujete výstup dále ručně upravit.
Běžné vzory gradientů
- Jemný akcent značky: dva blízké odstíny (např. dva odstíny stejné barvy) v mělkém úhlu pro jemné umytí pozadí.
- Vysoce kontrastní CTA tlačítko: dvě sytá, doplňkové barvy při 90deg nebo 135deg pro výrazný, klikatelný vzhled.
- Překryv na obrázku: gradient z průhledné do plné barvy (nastavte průhlednost přes barvu rgba v podkladovém hexu výběru, nebo upravte po zkopírování) vrstvený přes background-image.
- Vícebarevný duhový/značkový gradient: 3–4 body rozmístěné napříč celým rozsahem 0–100 % pro plynulejší, postupnější přechody, než umožňuje dvoubarevný gradient.
- Radiální reflektor: jasný středový bod blízko 0 % blednoucí do tmavšího krajního bodu blízko 100 %, užitečné pro úvodní sekce nebo zvýraznění karet.
Kombinace s dalšími CSS nástroji
Gradienty se často kombinují se zaoblenými rohy a stíny na stejném elementu — karta s gradientem, jemným box-shadow a zaoblenými rohy je běžný UI vzor. Vygenerujte každou část samostatně a zkombinujte deklarace CSS na elementu.
→ Generátor box-shadow · Generátor border-radius · Výběr barvy
Časté dotazy
Jaký je rozdíl mezi linear-gradient() a radial-gradient()?
linear-gradient() přechází barvy podél přímky pod zadaným úhlem. radial-gradient() přechází barvy směrem ven ze středového bodu v rozšiřujících se tvarech (kruh nebo elipsa). Obě přijímají stejný typ seznamu barevných bodů oddělených čárkou; liší se pouze tvar přechodu.
Jak fungují úhly CSS gradientu?
Úhly CSS gradientu běží ve směru hodinových ručiček počínaje od 'to top' (0deg směřuje nahoru). 90deg směřuje doprava, 180deg dolů a 270deg doleva — opačná konvence od standardních matematických úhlů, což je běžný zdroj zmatku při ručním psaní gradientů.
Můžu použít víc než 4 barevné body?
Ano — CSS gradienty přijímají libovolný počet barevných bodů oddělených čárkou. Tento nástroj omezuje interaktivní builder na 4 kvůli přehlednosti UI, ale vygenerované CSS můžete zkopírovat a ručně přidat další položky 'barva pozice%' oddělené čárkou ve svém stylopisu.
Proč můj gradient vypadá pruhovaně místo plynule?
Pruhování obvykle pochází z barev, které jsou příliš vzdálené odstínem s příliš málo body mezi nimi, nebo z omezené vlastní barevné přesnosti prohlížeče při velmi nízkém kontrastu. Přidání mezilehlého bodu se smíšenou barvou nebo výběr barev bližších odstínem obecně vytvoří plynulejší výsledek.
Můžu animovat CSS gradient?
Ne přímo — gradienty nejsou nativně animovatelné tak jako background-position nebo transform, protože prohlížeče nedokáží interpolovat mezi dvěma libovolnými definicemi gradientu. Běžná řešení zahrnují animaci background-position na předimenzovaném gradientu nebo přechod background-color, pokud se mění pouze jedna barva.