ByBence Tools · Design
Mesh gradient generátor
Készíts többpontos CSS színátmenetet vizuális szerkesztővel. Adj hozzá color stopokat, állítsd a geometriát, majd másold ki a kész CSS, Chakra vagy React kódot.
Color stopok
3/8 pont · a sávon húzhatók
Pont 1
Pozíció
%
Pont 2
Pozíció
%
Pont 3
Pozíció
%
Mesh pontok
A számozott pontokat közvetlenül a preview-n húzhatod. Minden pont külön radial-gradient rétegként kerül a CSS-be.
CSS
background: radial-gradient(circle at 18% 22%, #111111 0%, #111111CC 18%, transparent 62%), radial-gradient(circle at 78% 24%, #7C3AED 0%, #7C3AEDCC 18%, transparent 62%), radial-gradient(circle at 56% 82%, #EC4899 0%, #EC4899CC 18%, transparent 62%), #111111;
A link megőrzi a színeket, stopokat és geometriát.
CSS gradient útmutató
Mesh Gradient Generator: többpontos szerkesztés, helyes CSS és gyakorlati használat
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
Lehet kettőnél több színt használni?
Igen. A szerkesztő legfeljebb nyolc color stopot kezel, és minden pontnak külön szín és pozíció adható.
Hogyan állítható a linear gradient szöge?
Vizuális szögtárcsával, pontos fokmezővel vagy gyors iránygombokkal. Nem kell egy hosszú range sliderrel célozni.
A megosztott gradient link megőrzi a szerkesztést?
Igen. A megosztási URL tartalmazza a színeket, color stop pozíciókat és a gradient geometriáját. A böngésző emellett helyi cache-ben is megőrzi a legutóbbi állapotot.
Minden megosztott gradient indexelhető?
Nem. Az egyedi felhasználói állapotok megoszthatók, de noindex jelzést kapnak. Csak a kurált, külön tartalmi értékkel és belső linkeléssel rendelkező gradient minták kerülnek indexelhető URL-re.