Preview

Vygenerované ovládací

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

prvky

135°
0%
100%

Oblíbené předvolby

Příklady

Prozkoumejte tyto úžasné příklady přechodů a nechte se inspirovat pro svůj další projekt. Kliknutím na libovolný přechod jej načtete do generátoru.

Sunset Blush

Teplý přechod inspirovaný krásnými západy slunce.

Mořský vánek

Klidný sklon evokující pocit pobřežních vod.

Mint Fusion

Svěží a moderní gradient kombinující mátovou a nebeskou modř

Svěží zahrada

Živý gradient představující krásu přírody.

kosmického snu

: Magický gradient inspirovaný noční oblohou.

zlaté hodiny

Teplý přechod zachycující podstatu soumraku.

přechodu Dokumentace

Co jsou přechody CSS?

Přechody CSS umožňují zobrazit hladké přechody mezi dvěma nebo více barvami. Lze je použít jako pozadí pro prvky a jsou k dispozici ve třech různých typech:

  • Lineární přechody:Přechod barev podél rovné čáry.
  • Kruhové přechody:Převádějí barvy od středového bodu směrem ven.
  • Kuželosečkové přechody:Převádějte barvy kolem středového bodu v kruhu.

Jak používat přechody

Jakmile vygenerujete přechod pomocí našeho nástroje, můžete ve svých projektech použít kód CSS:

  1. Zkopírujte kód CSS z generátoru.
  2. Vložte jej do souboru CSS nebo jej použijte jako vložený v prvcích HTML.
  3. Použijte přechod na jakýkoli prvek pomocíbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Použijte více než dvě barvy pro složitější efekt přechodu.
  • Úpravou poloh barev můžete určit, kde se budou přechody vyskytovat.
  • Kombinujte více přechodů pro ještě kreativnější efekty.
  • U kuželosečkových přechodů se změnou středu vytvoří zajímavé vzory.
  • Uložte si své oblíbené přechody pro pozdější použití.

Podpora

Přechody CSS jsou v moderních prohlížečích široce podporovány. Starší prohlížeče, jako je Internet Explorer, je však nemusí vykreslit správně. Vždy poskytněte záložní barvu:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

O tomto nástroji

Náš generátor přechodů CSS je navržen tak, aby pomohl vývojářům a návrhářům vytvářet krásné přechody bez námahy. Ať už pracujete na webu, v aplikaci nebo jen chcete experimentovat s barvami, tento nástroj vám usnadní vytvoření dokonalého přechodu pro váš projekt.

Features

Snadné použití

Intuitivní rozhraní pro vytváření přechodů.

Responzivní design

funguje perfektně na všech velikostech obrazovek.

Kopírování a vkládání připraveno

Získejte okamžitě čistý kód CSS.

Dostupné

: Začněte s krásnými předdefinovanými přechody.

Related Tools

Zkrášlovač CSS

Formátujte a zkrášlete svůj CSS kód s profesionální přesností

Převodník jednotek teploty

Transformujte svůj kód SCSS do CSS. Rychle, snadno a bezpečně.

Převodník Sass do CSS

Transformujte svůj kód Sass do CSS. Rychle, snadno a bezpečně.

Generátor filtrů CSS

Vytvářejte a vizualizujte vlastní obrazové filtry CSS

Převodník astronomických jednotek

Převádějte mezi astronomickými jednotkami s přesností pro vaše prostorové výpočty

Validátor JSON

Snadné kódování parametrů URL přímo ve vašem prohlížeči.