Hogyan használd?
- Válassz egy kiinduló mintát, vagy kezdd a két alapszínnel.
- Állítsd be a típust (lineáris, sugaras, kúpos), a szöget vagy a középpontot.
- Adj hozzá színpontokat, és húzd őket a helyükre; az átlátszóságot is állíthatod.
- Másold ki a CSS-t vagy a Tailwind-osztályt.
Miért oklch-keverés?
A klasszikus linear-gradient az sRGB színtérben keveri a színeket. Két élénk, egymással szemközti színnél (például kék és sárga) emiatt a közepe szürkés, fakó lesz.
Az in oklch kulcsszóval a böngésző az emberi látáshoz igazított színtérben kever, így az átmenet élénk és egyenletes marad. A generátor ezt alapból bekapcsolja, és elé tesz egy sima sRGB-s sort is a régebbi böngészőknek:
background: linear-gradient(135deg, #ff7a59 0%, #7c3aed 100%);
background: linear-gradient(135deg in oklch, #ff7a59 0%, #7c3aed 100%);
Az új sort a Chrome 111+, a Safari 16.2+ és a Firefox 127+ érti; a régebbiek a felsőt használják.
A három típus
- Lineáris: egy irányba halad, a szöget fokban adod meg (0° felfelé, 90° jobbra).
- Sugaras (radial): egy pontból indul kör vagy ellipszis alakban. Fénykörre, kiemelésre jó.
- Kúpos (conic): a középpont körül forog. Színkörhöz, kördiagramhoz, „töltésjelzőhöz” használható.
Az ismétlődő változattal csíkos és mintás háttér is készül, kép nélkül.
Tailwind és ellenőrzés
A Tailwind-kimenet tetszőleges értékes osztály (bg-[linear-gradient(...)]), a szóközöket aláhúzásra cseréljük, ahogy a Tailwind várja. A CSS-t a böngésződ saját CSS.supports() függvényével ellenőrizzük, így azonnal látod, ha valamit nem fogadna el.
A beállításokat egy linkben is elküldheted: a # utáni részbe kerülnek, a szerverünk nem látja őket.
Gyakori kérdések
Hogyan készítek CSS színátmenetet?
A background tulajdonságba írt linear-gradient(), radial-gradient() vagy conic-gradient() függvénnyel. A generátor ezt megírja helyetted.
Miért szürke a színátmenet közepe?
Mert az sRGB-keverés két élénk, szemközti szín között elszürkül. Kapcsold be az oklch-keverést.
Működik minden böngészőben?
A sima színátmenet igen. Az oklch-keverés újabb, ezért teszünk elé tartalék sort.
Lehet átlátszó színt használni?
Igen, minden színpontnak külön állítható a fedése.