ByBence Tools · Design
Színátmenet generátor
Készíts többpontos CSS színátmenetet egy vizuális szerkesztőben. Az alap linear editor alatt külön módoldalakat és szerkeszthető, indexelhető mintákat is találsz.
Color stopok
3/8 pont · a sávon húzhatók
Pont 1
Pozíció
%
Pont 2
Pozíció
%
Pont 3
Pozíció
%
Irány
0°
90°
180°
270°
CSS
background: linear-gradient(135deg, #111111 0%, #7C3AED 48%, #EC4899 100%);
A link megőrzi a színeket, stopokat és geometriát.
Válassz gradient típust
Az általános szerkesztő linear móddal indul. Ha más geometriára van szükséged, nyisd meg a dedikált módoldalt; ezek saját tartalommal és keresési szándékkal rendelkeznek.
Indexelhető mód
Linear Gradient Generator
Linear gradient generátor több color stoppal, vizuális szögvezérléssel, húzható pozíciókkal és CSS, Chakra UI, React kódkimenettel.
Indexelhető mód
Radial Gradient Generator
Radial gradient generátor több color stoppal, állítható középponttal, kör/ellipszis móddal és másolható CSS kóddal.
Indexelhető mód
Conic Gradient Generator
Conic gradient generátor több színnel, forgási szöggel, állítható középponttal és CSS/Chakra kimenettel.
Kísérleti mód
Mesh Gradient Generator
Mesh gradient generátor több szabadon pozicionálható színponttal és rétegzett radial-gradient CSS kimenettel.
Megosztható linear gradient minták
Ezek a példák külön, indexelhető URL-t kapnak, mert önálló mintaként és kiindulópontként is használhatók. Megnyitás után ugyanúgy tovább szerkeszthetők.
Naplemente
meleg narancs–rózsaszín–lila átmenet hero és social háttérhez
Ocean Blue
kék és türkiz webes háttér
Purple Blue
modern lila–kék SaaS és tech gradient
Pink Orange
rózsaszín–narancs kreatív átmenet
Green Teal
zöld–türkiz természetes és friss háttér
Black Gray
sötét fekete–szürke prémium háttér
Soft Pastel
világos pasztell webes háttér
Fire
piros–narancs–sárga tüzes színátmenet
CSS gradient útmutató
Színátmenet generátor: linear, radial és conic gradient egy rendszerben
A gradient szerkesztő most nem két input és egy szögcsúszka. Tetszőleges több color stopot adhatsz hozzá, minden pont pozíciója külön állítható, a lineáris szöget vizuális tárcsával vagy pontos fokértékkel módosíthatod, a gradient típusok pedig külön URL-en érhetők el.
A linear, radial, conic és mesh mód ugyanazokat a közös színválasztó komponenseket használja, ezért a szerkesztési logika konzisztens marad.
Linear
Szög + stopok
Klasszikus CSS átmenet.
Radial
Középpont
Kör vagy ellipszis.
Conic
Forgási irány
Szög körüli átmenet.
Mesh
Több pont
Rétegzett radial CSS.
Hogyan használd?
Típus
Válassz linear, radial, conic vagy mesh szerkesztést.
Color stopok
Adj hozzá több színt, és húzd a stopokat a kívánt pozícióra.
Geometria
Állítsd a szöget, középpontot vagy mesh pontokat.
Export
Másold CSS, Chakra vagy React formában.
A color stop fontosabb, mint a színek száma
Három szín nem automatikusan jobb két színnél. A gradient karakterét az is meghatározza, hol helyezkednek el a stopok. Ha két stop túl közel kerül, hirtelen váltást kapsz; nagyobb távolságnál lágyabb átmenetet.
A szerkesztőben ezért minden stopnak saját százalékos pozíciója van, és a sorrend automatikusan követi a pozíciókat.
Többpontos linear-gradient
ByBence Tools
background: linear-gradient(135deg, #111111 0%, #7C3AED 42%, #EC4899 72%, #F59E0B 100% );
Linear, radial, conic vagy mesh?
01
Linear
Hero, button, panel és általános irányított átmenet.
02
Radial
Glow, spotlight, fókuszpont és puha fényfolt.
03
Conic
Kördiagram-szerű, spektrum- vagy progress jellegű vizuál.
04
Mesh
Több független színpontból épített organikus háttér.
A mesh CSS valójában rétegezett gradient
A böngészőkben nincs egyetlen univerzális, szabadon húzható „mesh-gradient” CSS függvény. Webes megoldásként több radial-gradient réteg kombinálható egy alapszín felett. Ez jól skálázódik, és továbbra is szerkeszthető kódként marad.
Ha pixelpontos grafikai meshre van szükség, SVG vagy raszteres export lehet megfelelőbb; a ByBence tool webes CSS háttérre optimalizál.
Kontraszt
Szöveg alatt a legrosszabb pont számít.
Egy gradienten belül a háttér világossága folyamatosan változik. Ne csak a két végponttal ellenőrizd az olvashatóságot, hanem a teljes szöveg mögötti területet vizsgáld.
Gyakori kérdések
Milyen színátmenetek készíthetők?
Linear, radial és conic CSS gradient külön indexelhető szerkesztőben érhető el, a kísérleti mesh mód pedig szintén használható. Mindegyik több color stopot kezel.
Lehet kettőnél több színt használni?
Igen. A szerkesztő akár nyolc color stopot kezel, külön színnel és pozícióval.
Megosztható a kész gradient?
Igen. A megosztási URL megőrzi a gradient típusát, színeit, stop pozícióit és geometriáját, az OG előnézet pedig magát az aktuális gradientet mutatja.
Mely gradient oldalak indexelhetők?
A fő gradient landing, a keresett linear/radial/conic módok és a kurált, önálló értéket adó minták indexelhetők. A véletlenszerű felhasználói állapotok megoszthatók, de noindex jelzést kapnak.