CSS színátmenet-generátor

A CSS színátmenet-generátor használata

1. Válassz Színátmenet típusa értéket: Lineáris, Radiális vagy Kúpos. A felül lévő nagy előnézet minden módosításkor frissül.
2. Lineáris színátmenetnél állítsd be a Szöget a csúszkával, vagy írd be fokban (a 90° balról jobbra, a 180° fentről lefelé halad). Kúpos színátmenetnél a szög azt adja meg, hol indul a körbefordulás.
3. Radiális és kúpos színátmenetnél a Középpont X és a Középpont Y mezővel mozgathatod a középpontot. A radiális színátmenet lehet Kör vagy Ellipszis (az Alakzat menüben).
4. Szerkeszd a Színmegállókat. Kattints a sáv bármely pontjára, hogy ott új megállót adj hozzá azzal a színnel, amellyel a színátmenet azon a ponton már rendelkezik, vagy használd a Megálló hozzáadása gombot a legnagyobb rés kitöltéséhez. Húzz egy fogantyút az áthelyezéséhez. Minden megállónak van egy sora is, ahol kiválaszthatod a színét, beírhatsz bármilyen CSS-színt, megadhatod a Pozíció (%) értékét, vagy Eltávolítással törölheted (a színátmenet legalább két megállót megtart).
5. Ha szeretnéd, jelöld be az Ismétlődő opciót, válaszd ki a Színinterpolációt, kattints a Megfordítás gombra a megállók felcseréléséhez, vagy a Véletlen színátmenet gombra egy kis ihletért.
6. Az eredményt a CSS-kódból másolhatod a Másolás gombbal.

Billentyűzet: fókuszálj a sáv egyik fogantyújára, majd a nyílbillentyűkkel 1%-kal (Shifttel 10%-kal) mozgathatod, a Home és az End billentyűvel a végekre ugorhatsz, a Delete billentyűvel pedig törölheted.

A három színátmenet-függvény

• A linear-gradient() egyenes vonal mentén keveri a színeket. A linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) balról az indigótól jobbra a rózsaszínig halad. A szögeket felülről, az óramutató járásával megegyezően mérik: a 0deg felfelé, a 90deg jobbra mutat.
• A radial-gradient() egy középpontból sugárzik szét. A radial-gradient(circle at 30% 40%, …) a középpontot balról 30%-ra, felülről 40%-ra helyezi. Az ellipszis a dobozzal együtt nyúlik, a kör kerek marad.
• A conic-gradient() egy középpont körül söpör végig, mint az óra mutatói. A conic-gradient(from 0deg at 50% 50%, …) színkereket, tortadiagramot és töltésjelző hatásokat készít. A megállók pozíciói a teljes kör részei.

Az Ismétlődő opció a repeating-linear-gradient() függvényt és testvéreit használja: a megállóid által meghatározott minta addig ismétlődik, amíg ki nem tölti a dobozt. Tedd az utolsó megállót jóval 100% alá (például 20%-ra), hogy csíkokat vagy gyűrűket láss.

Két, azonos pozíciójú megálló keveredés helyett éles élt hoz létre, így készülnek a csíkok és a zászlók. A generátor a kódban pozíció szerint rendezve tartja a megállókat, ahogy a CSS megköveteli.

sRGB vagy OKLCH interpoláció

Alapértelmezés szerint a böngészők sRGB-ben keverik a színátmenet színeit. Két telített szín, például a kék és a sárga között ez gyakran fakó szürke vagy sáros középső részt eredményez. A CSS Color Level 4 lehetővé teszi az interpolációs tér megválasztását: a linear-gradient(90deg in oklch, …) az észlelési OKLCH térben kever, és élénken tartja a közepét.

Az OKLCH (simább, sRGB tartalékkal) esetén az eszköz két background deklarációt ír: először a klasszikus sRGB változatot, utána az OKLCH-t. Az interpolációs tereket támogató böngészők (Chrome és Edge 111-től, Safari 16.2-től, Firefox 127-től) a második sort használják; a régebbiek figyelmen kívül hagyják, és az elsőnél maradnak.

Tippek

• A megállók mezőiben az átlátszó színek is elfogadottak, például #00000080 vagy rgb(0 0 0 / 50%), ami képekre helyezett átfedéseknél hasznos.
• A kód background tulajdonsággal készül. Használj helyette background-image tulajdonságot, ha a többi háttértulajdonságot külön állítod be.
• A visszafogott színátmenetek (ugyanazon szín két közeli árnyalata) általában profibbnak tűnnek, mint a szivárványos keverékek.