CodeKitHubČo je tento nástroj?
CSS gradienty sú obrázky generované prehliadačom zo zoznamu farieb, nie súbory, ktoré nahrávate — linear-gradient() prechádza farbami pozdĺž priamej línie pod daným uhlom, zatiaľ čo radial-gradient() prechádza farbami smerom von od stredového bodu. Obe prijímajú dve alebo viac farebných zastávok, každá voliteľne pripnutá na pozíciu pozdĺž gradientu.
Pri ručnom písaní sa gradienty dajú ľahko jemne pokaziť: poradie zastávok, chýbajúce percentá alebo hodnota uhla v opačnom smere (CSS uhly bežia v smere hodinových ručičiek od „to top“, na rozdiel od matematických uhlov). Tento nástroj drží syntax mimo vašej cesty — nastavte farby a pozície pomocou výberov a posuvníkov, sledujte, ako sa náhľadový box aktualizuje v reálnom čase, a skopírujte výsledné CSS, keď vyzerá správne.
Zdroj: CSS Images Module Level 3, W3C — špecifikácia definujúca syntax linear-gradient() a radial-gradient().
Prečo ho používať?
- Živý náhľad sa aktualizuje okamžite pri každej zmene farby, pozície aj uhla — nie je potrebné znova načítať stránku, aby ste videli výsledok.
- Prepínanie medzi lineárnym a radiálnym gradientom jedným kliknutím; ovládanie uhla sa automaticky skryje pri radiálnom gradiente, kde sa neuplatňuje.
- Pridávanie alebo odoberanie farebných zastávok (2 až 4) namiesto obmedzenia na pevný dvojfarebný gradient.
- Každá zastávka má vlastný posuvník pozície, takže zastávky nemusia byť rovnomerne rozmiestnené.
- Generuje pripravené CSS použitím štandardnej syntaxe linear-gradient()/radial-gradient().
- Beží úplne vo vašom prehliadači — nič, čo nakonfigurujete, sa nikam nenahráva. Zadarmo, bez registrácie, funguje na mobile.
Ako sa používa
- Vyberte Lineárny alebo Radiálny ako typ gradientu.
- Pri lineárnom gradiente potiahnite posuvník uhla — 90deg ide zľava doprava, 180deg zhora nadol atď.
- Nastavte farbu a pozíciu pre každú zastávku; prvá zastávka je počiatočná farba gradientu, posledná je jeho koncová farba.
- Kliknite na „+ Pridať zastávku“ a pridajte až 4 zastávky pre viacfarebný gradient, alebo tlačidlo ✕ na odstránenie jednej (minimálne 2).
- Skopírujte vygenerované CSS a vložte ho do deklarácie background alebo background-image.
Príklad
Vstup
Lineárny · Uhol: 90deg · Zastávky: #f97316 pri 0 %, #ec4899 pri 100 %Výstup
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Gradient zľava doprava z oranžovej do ružovej — bežný štýl pre tlačidlá, bannery a hero pozadia.
Lineárne vs. radiálne gradienty
Lineárny gradient prechádza farbou pozdĺž priamej línie, riadenej uhlom — vhodné pre bannery, tlačidlá a smerové pozadia. Radiálny gradient prechádza farbou smerom von od stredového bodu v rozpínajúcich sa prstencoch, čo sa hodí na efekty reflektora, odznaky alebo pozadia v štýle žiary. Tento nástroj štandardne nastavuje radiálny gradient na tvar kruhu vystredený v boxe, čo pokrýva najbežnejšie použitie radiálneho gradientu; CSS tiež podporuje tvary elipsy a mimostredové pozície, ak potrebujete výstup ďalej ručne upraviť.
Bežné vzory gradientov
- Jemný akcent značky: dva blízke odtiene (napr. dva odtiene tej istej farby) pod plytkým uhlom pre jemné pozadie.
- Kontrastné CTA tlačidlo: dve sýte, komplementárne farby pod 90deg alebo 135deg pre výrazný, klikateľný vzhľad.
- Prekrytie na obrázku: gradient z priehľadnej do plnej farby (nastavte priehľadnosť cez rgba farbu v podkladovom hex výberu alebo upravte po skopírovaní) vrstvený nad background-image.
- Viacfarebný dúhový/značkový gradient: 3–4 zastávky rozmiestnené naprieč celým rozsahom 0–100 % pre plynulejšie, postupnejšie prechody než umožňuje dvojfarebný gradient.
- Radiálny reflektor: jasná stredová zastávka blízko 0 % prechádzajúca do tmavšej okrajovej zastávky blízko 100 %, užitočné pre hero sekcie alebo zvýraznenie kariet.
Kombinácia s ďalšími CSS nástrojmi
Gradienty sa často kombinujú so zaoblenými rohmi a tieňmi na tom istom prvku — karta s gradientom, jemným box-shadow a zaoblenými rohmi je bežný vzor rozhrania. Vytvorte každú časť samostatne a skombinujte CSS deklarácie na prvku.
→ Generátor box-shadow · Generátor border-radius · Výber farby
Časté otázky
Aký je rozdiel medzi linear-gradient() a radial-gradient()?
linear-gradient() prechádza farbami pozdĺž priamej línie pod zadaným uhlom. radial-gradient() prechádza farbami smerom von od stredového bodu v rozpínajúcich sa tvaroch (kruh alebo elipsa). Obe prijímajú rovnaký typ zoznamu farebných zastávok oddelených čiarkami; líši sa len tvar prechodu.
Ako fungujú uhly CSS gradientov?
Uhly CSS gradientov bežia v smere hodinových ručičiek od „to top“ (0deg smeruje nahor). 90deg smeruje doprava, 180deg nadol a 270deg doľava — opačná konvencia než štandardné matematické uhly, čo je bežný zdroj zmätku pri ručnom písaní gradientov.
Môžem použiť viac ako 4 farebné zastávky?
Áno — CSS gradienty prijímajú ľubovoľný počet farebných zastávok oddelených čiarkami. Tento nástroj obmedzuje interaktívny builder na 4 kvôli prehľadnosti rozhrania, ale môžete skopírovať vygenerované CSS a ručne pridať ďalšie záznamy „farba pozícia%“ oddelené čiarkami vo svojom štýlopise.
Prečo môj gradient vyzerá pásovito namiesto plynulo?
Pásovanie zvyčajne pochádza z farieb, ktoré sú príliš vzdialené v odtieni s príliš málo zastávkami medzi nimi, alebo z obmedzenej vlastnej farebnej presnosti prehliadača pri veľmi nízkom kontraste. Pridanie medzizastávky so zmiešanou farbou alebo výber farieb bližšie v odtieni väčšinou prináša plynulejší výsledok.
Môžem animovať CSS gradient?
Nie priamo — gradienty nie sú prirodzene animovateľné tak, ako background-position alebo transform, keďže prehliadače nedokážu interpolovať medzi dvoma ľubovoľnými definíciami gradientu. Bežné riešenia zahŕňajú animovanie background-position na predimenzovanom gradiente alebo prechod background-color, ak sa mení len jedna farba.