Čtyři typy přechodů
Vytvořte lineární, radiální nebo kuželové pozadí. Pro vícebodové prolínání se přes sebe skládají radiální barevné plochy.
Generátor barevných přechodů
Vytvořte barevný přechod, upravte jeho barvy a směr a zkopírujte CSS. Začít můžete i některou z 60 předvoleb.
Vybrat režim
Další akce
Související nástroje
Vaše statistiky
0
Vybrané barvy
0
Exportované palety
0
Vytvořené přechody
0
Kontroly kontrastu
Výběr barvy
Nejpoužívanější režim
0%
Skóre aktivity
Jak vytvořit CSS přechod
Video se nepodařilo načíst. Můžete postupovat podle návodu níže.
Video ukazuje anglické rozhraní.
Volba Lineární prolíná barvy v přímém směru, Radiální od středu a Kuželový kolem středu. Pro více barevných oblastí zvolte Vícebodový. Pokud chcete začít s připravenými barvami, použijte rychlou předvolbu.
Vytvořte pozadí s CSS přechodem
60 výchozích předvoleb
Vyhledejte předvolbu v knihovně a použijte ji. Pak upravte barvy a jejich polohy podle svého návrhu.
Barevné zarážky a body
Lineární, radiální a kuželový přechod pojme nejvýše šest zarážek. Vícebodový přechod umožňuje až deset barevných bodů.
Zobrazit další (3)Zobrazit méně
Kód CSS a SCSS
Zkopírujte CSS pozadí nebo proměnnou SCSS. Po změně směru či polohy barev ověřte výsledek ve svých stylech.
Omezení exportních formátů
Tailwind přechod zjednodušuje na lineární. SVG používá u kuželových a vícebodových návrhů lineární náhradu. Tyto formáty proto nemusí odpovídat náhledu.
Další nástroje pro barvy
Přepínač režimů otevře samostatné stránky pro výběr barev, barvy z obrázků, tvorbu palet a kontrolu kontrastu.
Časté otázky
Jak vytvořit CSS přechod?
Vyberte typ nebo předvolbu, upravte barvy a jejich polohy a zkopírujte CSS pozadí. Vložte ho do svých stylů a ověřte v prohlížeči, pro který návrh připravujete.
Jaké typy přechodů můžu vytvořit?
Lineární, radiální, kuželové a vícebodové. Vícebodové prolínání vzniká vrstvením radiálních přechodů nad základní barvou, nepoužívá samostatnou CSS funkci pro tento typ.
Lze vytvořit kuželový nebo síťový přechod?
Ano. Kuželový přechod rozmisťuje barvy kolem středu. Vícebodový přechod vrství radiální barevné plochy a vytváří vzhled síťového prolínání. Pro zachování těchto typů použijte CSS.
Kolik barevných bodů můžu přidat?
Lineární, radiální a kuželový přechod umožňují až šest barevných zarážek. Vícebodový přechod umožňuje až deset bodů. U všech můžete měnit barvu a polohu.
Zobrazit další (4)Zobrazit méně
Bude každý export odpovídat náhledu?
Tailwind zjednodušuje návrh na lineární přechod. SVG nahrazuje kuželové a vícebodové přechody lineárními. PNG a JPG mají rozměry 1200 × 600 pixelů, takže se jejich proporce a prolínání barev mohou od CSS náhledu lišit. Původní typ přechodu zachováte pomocí CSS.
Jsou k dispozici připravené přechody?
Ano. Přes Procházet knihovnu otevřete knihovnu s 60 předvolbami všech čtyř typů. Můžete v ní vyhledávat, vybrat výchozí přechod a dále ho upravit.
Je generátor přechodů zdarma?
Ano, MORELESS ho nabízí bez účtu. Výpočty i vytváření kódu probíhají v prohlížeči.
Jak otevřu další nástroje pro barvy?
Použijte přepínač režimů nad ovládáním přechodu. Otevře samostatné stránky pro výběr barev, barvy z obrázků, tvorbu palet a kontrolu kontrastu.
Technické podrobnosti
CSS pozadí
CSS používá funkce linear-gradient(), radial-gradient() nebo conic-gradient() s barvami a jejich polohami. Náhled vykresluje prohlížeč pomocí CSS. Zkopírovaný výsledek ověřte ve svých stylech.
Vícebodové prolínání
Vícebodový přechod vrství funkce radial-gradient() nad základní barvou. Každý bod má barvu a polohu ve dvou osách. CSS funkce multipoint-gradient() neexistuje.
Zobrazit další (2)Zobrazit méně
Omezení exportu kódu
SCSS uloží přechod do proměnné. Tailwind používá zjednodušený lineární směr a jen část barev. SVG podporuje lineární a radiální přechody, kuželové a vícebodové nahrazuje lineárními.
Omezení exportu obrázků
PNG a JPG se vykreslují přes Canvas v rozměrech 1200 × 600 pixelů s aktuálními barvami a dostupným nastavením úhlu, středu nebo poloh bodů. Pevný poměr stran a prolínání barev se mohou lišit od CSS náhledu. Kuželový přechod lze exportovat jako obrázek jen při jeho podpoře v Canvas.