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 %.
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.
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ě.
Č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.