Bezplatný prevodník

Prechod CSS Generátor

Vizuálne generujte prechody CSS pomocou živého náhľadu. Vytvorte lineárne, radiálne a kužeľové prechody pomocou vlastných zarážok farieb – zadarmo a na strane klienta.

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

O tomto nástroji

Vytvorte krásne lineárne a radiálne prechody CSS pomocou vizuálneho editora. Vyberte si farby, upravte zastávky, zmeňte smer alebo uhol a pozrite si aktualizáciu živého náhľadu v reálnom čase. Skopírujte vygenerovaný kód CSS – vrátane predpôn dodávateľa pre staršie prehliadače – a vložte ho priamo do šablóny so štýlmi.

Ako používať

  1. Vyberte typ gradientu: lineárny alebo radiálny.
  2. Pridajte farebné zarážky kliknutím na pruh prechodu a výberom farieb.
  3. Pomocou ovládacích prvkov upravte uhol prechodu (lineárny) alebo polohu (radiálny).
  4. Skopírujte vygenerovaný kód CSS z výstupného panela.

Často kladené otázky

Fungujú prechody CSS vo všetkých prehliadačoch?
Moderné prechody CSS (lineárny prechod, radiálny prechod) sú podporované vo všetkých súčasných prehliadačoch vrátane Chrome, Firefox, Safari a Edge. Nástroj môže voliteľne generovať predpony -webkit- pre staršie verzie prehliadačov.
Môžem vytvoriť viacfarebné prechody?
áno. Pridajte toľko farebných zarážok, koľko potrebujete. Môžete tiež upraviť polohu každej zarážky a určiť, kde sa farby miešajú. To umožňuje komplexné prechody dúhy, západu slnka alebo vlastných značiek.
Aký je rozdiel medzi lineárnym a radiálnym gradientom?
Lineárne prechody prechádzajú farby pozdĺž priamky (zhora nadol, zľava doprava, uhlopriečka alebo akýkoľvek uhol). Radiálne prechody prechádzajú farby smerom von zo stredového bodu do kruhového alebo elipsovitého tvaru.
Môžem použiť prechod ako pozadie pre text?
áno. Ak chcete použiť prechod na text, použite pozadie klip: text s -webkit-text-fill-color: transparent. Vygenerovaný CSS poskytuje definíciu prechodu – skombinujte ju s týmito vlastnosťami pre text s prechodom.