Zdarma převodník

Přechod CSS Generátor

Vizuálně generujte přechody CSS pomocí živého náhledu. Vytvářejte lineární, radiální a kuželové přechody pomocí vlastních barevných zarážek – zdarma a na straně klienta.

Živý náhled
Výstup CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Úhel (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

O tomto nástroji

Vytvářejte krásné lineární a radiální přechody CSS pomocí vizuálního editoru. Vyberte si barvy, upravte zastávky, změňte směr nebo úhel a sledujte aktualizaci živého náhledu v reálném čase. Zkopírujte vygenerovaný kód CSS – včetně předpon dodavatele pro starší prohlížeče – a vložte jej přímo do šablony stylů.

Jak používat

  1. Vyberte typ přechodu: lineární nebo radiální.
  2. Přidejte barevné zarážky kliknutím na pruh přechodu a výběrem barev.
  3. Upravte úhel přechodu (lineární) nebo polohu (radiální) pomocí ovládacích prvků.
  4. Zkopírujte vygenerovaný CSS kód z výstupního panelu.

Často kladené dotazy

Fungují přechody CSS ve všech prohlížečích?
Moderní přechody CSS (lineární přechod, radiální přechod) jsou podporovány ve všech současných prohlížečích včetně Chrome, Firefox, Safari a Edge. Nástroj může volitelně generovat předpony -webkit- pro starší verze prohlížečů.
Mohu vytvořit vícebarevné přechody?
Ano. Přidejte tolik barevných zarážek, kolik potřebujete. Můžete také upravit polohu každé zarážky a určit, kde se barvy prolínají. To umožňuje komplexní přechody duhy, západu slunce nebo vlastní značky.
Jaký je rozdíl mezi lineárním a radiálním gradientem?
Lineární přechody přecházejí barvy podél přímky (shora dolů, zleva doprava, diagonálně nebo v libovolném úhlu). Radiální přechody přecházejí barvy směrem ven ze středového bodu do kruhového nebo eliptického tvaru.
Mohu použít přechod jako pozadí pro text?
Ano. Použijte background-clip: text s -webkit-text-fill-color: transparent pro použití přechodu na text. Vygenerovaný CSS poskytuje definici přechodu – zkombinujte ji s těmito vlastnostmi pro text s přechodem.