Generátor přechodů CSS
Navrhujte přechody pozadí CSS bez zapamatování syntaxe. Přepínejte mezi lineárním a radiálním typem, nastavte úhel pro lineární přechody (stupně) a vyberte dvě barevné zarážky na 0 % a 100 %. Náhled se aktualizuje okamžitě; zkopírujte úplné pozadí nebo deklaraci obrázku pozadí do své šablony stylů. Podporuje HEX barevný vstup s ověřením.
Úhel (°)
Barva 1
Barva 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Jak vytvořit gradient
1. Vyberte lineární nebo radiální gradient.
2. Pro lineární nastavte úhel ve stupních (0 = zdola nahoru, 90 = zleva doprava).
3. Zadejte počáteční a koncovou barvu (HEX).
4. Zkopírujte CSS z karty výsledků do svého projektu.
Příklady přechodů
Lineární hrdina banner (135°)
Teal #6F9B96 až broskev #E8C4B8 na 135° — úhlopříčka běžná v záhlavích vstupních stránek. Použít jako pozadí na sekci plné šířky.
Radiální reflektor
Radiální typ se světlým středem a tmavým okrajem — simuluje vinětu: radiální-gradient(kruh, #fff 0%, #333 100%).
Vertikální stmívání (180 stupňů)
Úhel 180 pro blednutí shora dolů ze značkové barvy na bílou — užitečné za navigačními lištami.
Kdy tento nástroj použít
• Když vytváříte prototyp pozadí uživatelského rozhraní a chcete okamžitou vizuální zpětnou vazbu.
• Když zapomenete, zda úhel 90 stupňů běží zleva doprava nebo shora dolů.
• Když potřebujete zkopírovat a vložit CSS pro CodePen, libovolné hodnoty Tailwind nebo předání návrhu.
Kdy zvolit něco jiného
• Když potřebujete více než dvě barevné zarážky — rozšiřte zkopírované CSS ručně nebo použijte návrhářskou aplikaci.
• Když chcete kuželové (sweep) přechody — zde není podporováno.
• Když potřebujete automatické varianty tmavého režimu — duplikujte a upravujte barvy samostatně.
Detail zarážky barev
Zarážka je barva plus volitelná pozice: #ff0000 0%, #0000ff 50%, #00ff00 100%. Prohlížeč interpoluje RGB mezi zastávkami. Střední zastávky vytvářejí pruhované západy slunce nebo pruhy více značek. Začněte se dvěma zastávkami zde, poté vložte a přidejte třetí zastávku v devtools, dokud to nebude vypadat správně.
Úhly lineárního přechodu
CSS měří úhly ve směru hodinových ručiček od „nahoru“ (0 stupňů). To se liší od hodiny matematiky, kde úhly často začínají zprava. Pokud přechod vypadá špatně otočený, přidejte nebo odečtěte 90 stupňů. Pro jemné doladění použijte živé úpravy devtools spolu s tímto generátorem.
Výkon a výpadky
Přechody jsou v moderních prohlížečích vhodné pro GPU. U velmi starých klientů nastavte plnou záložní barvu pozadí na světlejší stop barvu před čárou přechodu.
Časté dotazy
Jaká je syntaxe CSS pro lineární gradient?
pozadí: linear-gradient(úhel, barva1 0%, barva2 100%); Úhel je ve stupních; barvy jsou zastávky podél čáry.
Jak fungují barevné zarážky?
Zastaví značku, kde každá barva sedí na čáře přechodu. 0 % je začátek, 100 % konec. Tento nástroj opravuje dvě zarážky; v případě potřeby přidejte další do svého editoru.
Lineární vs. radiální?
Lineární prolnutí podél přímky. Radiální se mísí směrem ven od středového bodu — dobré pro kruhy a měkká místa.
Které hodnoty úhlu jsou společné?
0 stupňů nahoru, 90 stupňů doprava, 180 stupňů dolů, úhlopříčka 135 stupňů — běžné pro karty a hrdiny.
Nastavuje pozadí nebo obrázek na pozadí?
Výstup používá zkratku na pozadí vhodnou pro většinu divů; můžete rozdělit na obrázek pozadí, pokud přepíšete jiné vrstvy.
Jsou barvy odesílány na server?
Ne. Náhled se vykresluje lokálně.
Je to zdarma?
Ano, není potřeba žádný účet.