Přeskočit na hlavní obsah
LibraTool logoLibraTool

Generátor CSS přechodů zdarma

Vytvářejte lineární, radiální a kuželové CSS přechody s živým náhledem. Zkopírujte CSS jedním kliknutím.

Funguje offline po načtení
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Zabrání šedým středům mezi velmi odlišnými barvami. Jako zálohu pro starší prohlížeče přidá obyčejný řádek sRGB.

0%
100%

Předvolby

Běžná použití

  • Vytvoř Přechody pro sekce hrdinůNavrhni přechodové pozadí na celou stranu pro sekce hrdinů webu a cílové stránky.
  • Vytvoř Tlačítka s přechody a CTANavrhni nápadité přechodové pozadí tlačítek pro výzvy k akci, které vynikají.
  • Vytvoř Pozadí s přechody pro kartyNavrhni výplně s přechody pro karty, modální okna, postranní panely a pozadí součástí UI.
  • Vytvoř Přechody pro grafiku sociálních médiíNavrhni živé přechodové pozadí pro příspěvky na Instagramu, miniatury YouTube a Twitter karty.
  • Vytvoř Barvy pro grafyGeneruj stupnice barev s přechody pro tepelné mapy, indikátory průběhu a vizualizace dat.

Jak to funguje

Generátor přechodů sestavuje řetězce CSS gradientů přímo v prohlížeči — bez knihovny, bez serveru, bez nahrávání. Ručně napsaná funkce sestavuje správnou syntaxi linear-gradient, radial-gradient nebo conic-gradient z vašich barevných zastávek a úhlu v reálném čase a poté formátuje výsledek pro zvolený výstupní cíl.

  1. 1
    Nastavte zastávky a směr
    Nastavíte 2 až 6 barevných zastávek pomocí nativního výběru barvy prohlížeče a poté umístíte každou zastávku podél osy 0–100 % posuvníkem rozsahu. Pro lineární a kónické přechody také zvolíte úhel (0–360°); pro radiální přechody zvolíte tvar (elipsa nebo kruh) a klíčové slovo velikosti, které řídí, jak daleko se přechod rozšíří.
  2. 2
    buildCss sestavuje řetězec přechodu
    Při každé změně místní funkce buildCss spojuje vaše parametry do správného volání funkce CSS — např. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nezapojuje se žádná knihovna; řetězec se sestavuje obyčejnou šablonovou logikou JavaScriptu a spojuje přímo z pole zastávek.
  3. 3
    Živý náhled se vykresluje přes vložený styl
    Sestavený řetězec přechodu se aplikuje přímo na prvek div jako vložený styl pozadí, takže vlastní CSS engine prohlížeče vykresluje náhled. Neúčastní se žádné plátno ani obrázek — to, co vidíte, je doslova aplikovaná vlastnost CSS.
  4. 4
    Výstup ke zkopírování ve čtyřech formátech
    Výběr formátu převádí stejný řetězec přechodu na obyčejné CSS (background: ...), blok CSS s pevnou náhradní barvou, třídu Tailwind s libovolnou hodnotou nebo deklaraci proměnné SCSS. Kliknutí na Kopírovat zapíše zvolený výstup do schránky přes navigator.clipboard.writeText. Aktuální přechod se také kóduje do hashe URL, takže jej lze uložit do záložek nebo sdílet.

Související nástroje

🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet
↔️

Generátor CSS Flexbox

Experimentujte se směrem flexu, zalamováním, justify a align na živých prvcích — a zkopírujte CSS.

Vyzkoušet
🧮

Maticová kalkulačka

Sčítání, odčítání, násobení, transpozice, inverze a úpravy matic, plus determinant, hodnost, vlastní čísla a řešení Ax = b — až do 8×8, s kopírováním jedním klepnutím. Zdarma a soukromě.

Vyzkoušet

Časté dotazy