Preskočiť na hlavný obsah
LibraTool logoLibraTool

Generátor CSS prechodov zadarmo

Vytvárajte lineárne, radiálne a kužeľové CSS prechody so živým náhľadom. Skopírujte CSS jedným kliknutím.

Po načítaní funguje offline
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Zabraňuje sivým stredom medzi veľmi odlišnými farbami. Pridá riadok s obyčajným sRGB ako záložný pre staršie prehliadače.

0%
100%

Predvolby

Bežné použitia

  • Vytvorte prechody pre hero sekcieNavrhnite celostránkové prechodové pozadia pre hero sekcie webov a vstupné stránky.
  • Vytvorte gradientné tlačidlá a CTANavrhnite pútavé pozadia tlačidiel s gradientmi pre výzvy na konanie, ktoré vynikajú.
  • Vytvorte gradientné pozadia pre kartyNavrhnite gradientné výplne pre karty, modálne dialógy, bočné panely a pozadia komponentov UI.
  • Vytvorte prechodmé farby pre grafiku sociálnych médiíNavrhnite živé pozadia prechodmých farieb pre príspevky Instagram, YouTube miniatúry a karty Twitter.
  • Vytvorte farebné stupnice pre grafyGenerujte farebné stupnice prechodmých farieb pre tepelné mapy, pruhov napretia a vizualizácie údajov.

Ako to funguje

Generátor gradientov zostavuje reťazce CSS gradientov priamo v prehliadači — bez knižnice, bez servera, bez nahrávania. Ručne napísaná funkcia zostavuje správnu syntax linear-gradient, radial-gradient alebo conic-gradient z vašich farebných zastávok a uhla v reálnom čase a potom formátuje výsledok pre zvolený výstupný cieľ.

  1. 1
    Nastavte zastávky a smer
    Nastavíte 2 až 6 farebných zastávok pomocou natívneho výberu farby prehliadača a potom umiestnite každú zastávku pozdĺž osi 0–100 % pomocou posuvníka range. Pre lineárne a kónické gradienty tiež vyberiete uhol (0–360°); pre radiálne gradienty vyberiete tvar (elipsa alebo kruh) a kľúčové slovo veľkosti, ktoré určuje, ako ďaleko sa gradient rozšíri.
  2. 2
    buildCss zostavuje reťazec gradientu
    Pri každej zmene lokálna funkcia buildCss zreťazí vaše parametre do správneho volania CSS funkcie — napr. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nie je zapojená žiadna knižnica; reťazec sa zostavuje pomocou obyčajnej logiky šablón JavaScriptu a spája sa priamo z poľa zastávok.
  3. 3
    Živý náhľad sa vykresľuje cez inline štýl
    Zostavený reťazec gradientu sa aplikuje priamo na element div ako inline štýl pozadia, takže vlastný CSS engine prehliadača vykresľuje náhľad. Nie je zapojený žiadny canvas ani obrázok — to, čo vidíte, je doslova aplikovaná vlastnosť CSS.
  4. 4
    Výstup pripravený na kopírovanie v štyroch formátoch
    Výber formátu prevádza ten istý reťazec gradientu na obyčajné CSS (background: ...), blok CSS so záložnou plnou farbou, Tailwind triedu s ľubovoľnou hodnotou, alebo deklaráciu premennej SCSS. Kliknutím na Kopírovať sa zvolený výstup zapíše do schránky cez navigator.clipboard.writeText. Aktuálny gradient je tiež zakódovaný v hash URL, takže ho môžete uložiť medzi záložky alebo zdieľať.

Súvisiace nástroje

🟦

Generátor CSS mriežky

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Vyskúšajte
↔️

Generátor CSS Flexbox

Experimentujte so smerom flex, zalomením, justifikáciou a zarovnaním na živých položkách — a skopírujte CSS.

Vyskúšajte
🧮

Kalkulačka matíc

Sčítavajte, odčítavajte, násobte, transponujte, invertujte a redukujte matice, počítajte determinant, hodnosť, vlastné čísla a riešte Ax = b – až do 8×8, s kopírovaním jedným ťuknutím. Zadarmo a súkromne.

Vyskúšajte

Často kladené otázky