Nástroje pro barvy

Generátor CSS přechodů: lineární, radiální a kuželový

Zdarma, bez registrace, funguje ve vašem prohlížeči. Navrhněte lineární, radiální nebo kuželový přechod s 2 až 8 barvami, sledujte jej naživo a zkopírujte CSS kód pozadí nebo stáhněte PNG.

Barevné zastávky

  • 0%
  • 100%

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

První řádek je plná barva pro velmi staré přístroje, které přechody nezobrazí.

Začněte z předlohy

Vytvořeno ve vašem zařízení.

Proč použít Generátor CSS přechodů

100% zdarma
Používejte, jak často chcete. Bez registrace, bez vodoznaku, bez instalace.
Soukromí od základu
Co napíšete, zůstává ve vašem prohlížeči a nikdy se nám neposílá.
Funguje na jakémkoli zařízení
Běží ve vašem prohlížeči na Windows, Macu, Linuxu, Androidu a iPhonu. Není potřeba žádná aplikace.

Jak použít Generátor CSS přechodů

  1. Zvolte Typ: Lineární, Radiální nebo Kuželový. Směr nastavte posuvníkem, nebo u radiálního přechodu zvolte Kruh nebo Elipsa.
  2. V části Barevné body vyberte každou barvu nebo zadejte kód a posuvníkem nastavte, kde se nachází. Pro další barvy použijte Přidat bod, až do 8, a Obrátit pro změnu pořadí.
  3. Nebo klikněte na jednu z předvoleb v části Začít z předvolby a upravte ji podle potřeby.
  4. Klikněte na Kopírovat CSS a vložte jej do své stylové tabulky, nebo zvolte Velikost obrázku a klikněte na Stáhnout PNG.

Často kladené otázky

Jak použiji CSS?

Vložte oba řádky do pravidla pro prvek, který chcete obarvit, například body nebo tlačítko. První řádek je záložní plná barva; druhý je přechod.

Jaký je rozdíl mezi lineárním, radiálním a kuželovým přechodem?

Lineární se prolíná podél přímky, radiální se šíří od středu v kruhu nebo elipse a kuželový se otáčí kolem středu jako barevné kolo nebo koláčový graf.

Jak změním směr lineárního přechodu?

Posuňte posuvník Směr od 0° do 360°. 0° jde zdola nahoru, 90° zleva doprava, 180° shora dolů a 135° diagonálně směrem vpravo dolů.

Kolik barev může přechod mít?

Od 2 do 8 barevných bodů. Každý bod má polohu od 0 % do 100 %; dva body na stejné poloze vytvoří ostrou hranu mezi barvami místo prolnutí.

Mohu použít průhlednost?

Ano. Do bodu zadejte barvu, například rgba(47, 91, 255, 0.5), nebo 8místný HEX kód a přechod se tam zprůhlední.

Mohu přechod stáhnout jako obrázek?

Ano. Zvolte 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 nebo 1500 × 500 a klikněte na Stáhnout PNG, třeba pro tapetu, prezentaci, příspěvek na sociální síť nebo záhlaví.

Funguje CSS s Tailwindem, Reactem nebo WordPressem?

Ano. Kód je prostý CSS, takže jej vložte do třídy ve své stylové tabulce (nebo do pole vlastního CSS) a přidejte tuto třídu k prvku. Funguje ve všech moderních prohlížečích.

Odesílá se něco na server?

Ne. Přechody se vytvářejí ve vašem zařízení.

Je Generátor CSS přechodů zdarma?

Ano. Používání je zdarma, bez registrace a bez instalace čehokoli.

Nápověda a návody (v angličtině)

Související nástroje