Generátor CSS gradientů
Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
Co je CSS gradient?
CSS gradient je hodnota obrázku CSS zobrazující plynulé přechody mezi dvěma nebo více barvami bez souborů obrázků. Gradienty jsou vykreslovány prohlížečem, což je činí nezávislými na rozlišení a vysoce výkonnými.
Jaké typy CSS gradientů jsou podporovány?
Generátor podporuje tři typy: linear-gradient (barvy podél přímky), radial-gradient (barvy vyzařující ze středu) a conic-gradient (barvy rotující kolem středu jako ciferník hodin).
Rozdíl mezi lineárním a radiálním gradientem?
Lineární gradienty přecházejí barvy podél přímky definované úhlem nebo klíčovým slovem směru. Radiální gradienty přecházejí barvy směrem ven ze středu v kruhových nebo eliptických tvarech.
Kolik barevných zastávek mohu použít?
Můžete použít tolik barevných zastávek, kolik potřebujete. Každá zastávka definuje barvu a volitelně pozici (0% až 100%) podél linie gradientu. Více zastávek vytváří složité vícebarevné přechody.
Jak použiji vygenerovaný CSS kód?
Zkopírujte vygenerovaný CSS kód a vložte jej jako hodnotu vlastnosti background nebo background-image ve vašem CSS stylesheetu. Kód funguje ve všech moderních prohlížečích.
Co jsou barevné zastávky v gradientech?
Barevné zastávky definují konkrétní barvy na konkrétních pozicích podél linie gradientu. Například "red 0%, blue 50%, green 100%" vytvoří gradient, který začíná červenou, přechází na modrou uprostřed a končí zelenou.
Mohu vytvářet gradienty pod úhlem?
Ano, lineární gradienty podporují hodnoty úhlu od 0deg do 360deg. Můžete také použít klíčová slova směru jako "to right", "to bottom", "to top left" pro běžné úhly.
Jsou CSS gradienty responzivní?
Ano, CSS gradienty jsou přirozeně responzivní, protože jsou vektorové a vykreslované prohlížečem. Škálují se perfektně na jakoukoli velikost kontejneru bez ztráty kvality nebo zvětšení velikosti souboru.
Ovlivňují CSS gradienty výkon stránky?
CSS gradienty jsou obecně velmi výkonné. Eliminují HTTP požadavky na soubory obrázků a jsou hardwarově akcelerované. Extrémně složité gradienty s mnoha zastávkami však mohou ovlivnit vykreslování na slabších zařízeních.
Mohu použít gradienty pro pozadí a okraje?
Ano, gradienty lze použít pro background-image, border-image, mask-image a jakoukoli vlastnost, která přijímá hodnoty obrázků CSS.
Které prohlížeče podporují CSS gradienty?
Všechny moderní prohlížeče podporují CSS gradienty včetně Chrome, Firefox, Safari, Edge a Opera. Podpora je výborná od IE10. Prefixy výrobců již nejsou potřeba.
Jak vytvořím opakující se gradient?
Použijte repeating-linear-gradient nebo repeating-radial-gradient místo standardních verzí. Ty opakují vzor gradientu pro vyplnění celého prvku a vytvářejí proužkované nebo vzorované efekty.
Mohu animovat CSS gradienty?
CSS gradienty nelze přímo animovat CSS přechody. Můžete však animovat background-position, background-size nebo použít vlastní CSS vlastnosti s @property pro vytvoření efektů animace gradientu.
Je tento generátor gradientů zdarma?
Ano, tento generátor CSS gradientů je zcela zdarma. Bez registrace, bez omezení použití a veškerý vygenerovaný kód je váš pro jakýkoli projekt bez uvedení autora.
Jak používat Generátor CSS gradientů
Vytvářejte CSS přechody na oko a okamžitě kopírujte CSS připravené do produkce. Vykreslování probíhá lokálně ve vašem prohlížeči, bez nahrávání.
- Vyberte Type přechodu: linear-gradient nebo radial-gradient.
- U lineárního přechodu nastavte Angle, u radiálního zvolte Shape, například circle nebo ellipse.
- Přidávejte, přebarvujte a přetahujte barevné zastávky v sekci Color Stops.
- Klikněte na vzorek pod Presets a začněte od hotové směsi.
- Zkopírujte vygenerované CSS a vložte jej do své šablony stylů.
Dvě zastávky různých barev na stejné pozici vytvoří ostrou hranu — rychlý způsob, jak udělat pruhy bez obrázků.
Související nástroje
- Generátor CSS Box Shadow Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
- Generátor Border Radius CSS Vizuální generátor border-radius CSS. Upravte každý roh nezávisle s živým náhledem a okamžitě zkopírujte CSS kód.
- Generátor CSS Grid Bezplatný vizuální generátor CSS Grid s živým náhledem. Interaktivně navrhujte responzivní mřížková rozvržení a exportujte produkční CSS kód.
- Generátor CSS Flexbox Vizuální generátor CSS Flexbox s živým náhledem. Upravte flex vlastnosti a získejte připravený CSS kód.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.