Generátor CSS Gradientu
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Proč používat vizuální generátor gradientu?
Ruční psaní CSS gradientů je zdlouhavé. Náš vizuální generátor umožňuje ovládat barevné zastávky pomocí výběru barvy a posuvníku polohy s okamžitou aktualizací.
3 typy gradientu
Lineární, radiální a kuželový gradient — s specializovanými ovládacími prvky pro každý typ
Vícebarevné gradienty
Přidejte neomezený počet barevných zastávek a přetahujte polohy pro složité gradienty
Živý náhled
Vidíte renderování gradientu v reálném čase při nastavování barev, poloh a úhlu
Vytvoření CSS gradientu ve 3 krocích
Vyberte typ gradientu
Vyberte lineární, radiální nebo kuželový gradient a nastavte úhel nebo směr
Nastavte barevné zastávky
Nastavte barvu každé zastávky pomocí výběru barvy a polohu posuvníky
Zkopírujte CSS
Klikněte 'Kopírovat CSS' pro získání kompletní vlastnosti background k použití ve stylopisu
Případy použití CSS gradientů
Pozadí hero sekce
Vytvářejte impresivní celostranné pozadí s diagonálními nebo radiálními gradienty
Gradientní text
Použijte gradient na text pomocí background-clip:text pro úžasné typografické efekty
Gradientní okraje
Použijte gradient s border-image pro vytvoření barevných rámů kolem prvků
Překrytí obrázku
Přidejte gradient přes obrázky pro tmavé překrytí zajišťující čitelnost textu
Nejlepší postupy pro CSS gradienty
✓ Pro diagonální gradienty používejte 135deg
Úhel 135 stupňů vytváří klasickou diagonálu z levého horního rohu do pravého dolního.
✓ Udržujte gradienty v UI subtilní
V UI prvcích jako tlačítka a karty používejte velmi subtilní gradienty s 10-20% rozdílem jasu pro hloubku.
✓ Nastavte záložní barvu
Přidejte plynnou barvu pozadí jako zálohu: background-color:#6366f1; background:linear-gradient(...).
✓ Animujte polohu gradientu
CSS gradienty nelze přímo animovat, ale můžete animovat background-position na větším gradientu pro hladký pohybový efekt.
❓ Nejčastější dotazy
Jaký je rozdíl mezi lineárním, radiálním a kuželovým gradientem?
Lineární gradient přechází podél přímé čáry v úhlu. Radiální vyzařuje ze středu kruhově nebo elipticky. Kuželový rotuje kolem středu — ideální pro kruhové ukazatele průběhu.
Jak vytvořit průhledný gradient?
Použijte transparent jako barevnou zastávku: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Vytvoří gradient od poloprůhledné barvy do plně průhledné — ideální pro překrytí obrázku.
Proč vidím pruhy v gradientu?
Pruhování (viditelné čáry mezi barvami) nastává na displejích nízké kvality nebo při přechodech mezi podobnými odstíny. Přidejte mezilehlou barevnou zastávku pro zmírnění přechodu.
Lze gradient použít jako okraj?
Ano; použijte border-image:linear-gradient(...) 1. Alternativně může ::before pseudo-prvek s gradientním pozadím a záporným z-index simulovat gradientní okraj.