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.