ByBence Tools · Design
Radial Sunset radial gradient
Naplemente radial gradient. Nyisd meg a mintát, módosítsd a color stopokat, majd másold a kész CSS-t.
Color stopok
3/8 pont · a sávon húzhatók
Pont 1
Pozíció
%
Pont 2
Pozíció
%
Pont 3
Pozíció
%
Forma
Középpont X
Középpont Y
CSS
background: radial-gradient(circle at 50% 45%, #FDE047 0%, #FB7185 45%, #7C3AED 100%);
A link megőrzi a színeket, stopokat és geometriát.
Kurált gradient minta
Radial Sunset: #FDE047 → #FB7185 → #7C3AED
Ez a minta naplemente radial gradient. A CSS közvetlenül használható, de az editorban minden pontja tovább alakítható.
Típus
radial
Színek
3
Irány
circle
CSS
radial-gradient(circle at 50% 45%, #FDE047 0…
A konkrét minta felépítése
Mitől működik a Radial Sunset gradient?
A Radial Sunset 3 color stopból épül fel: #FDE047, #FB7185, #7C3AED. A circle forma a 50% / 45% középpontból teríti szét a színeket. Ez a konkrét összeállítás $naplemente radial gradient.
Stop 1 · #FDE047
0% pozíció · megnyitás Color Pickerben →
Stop 2 · #FB7185
45% pozíció · megnyitás Color Pickerben →
Stop 3 · #7C3AED
100% pozíció · megnyitás Color Pickerben →
A minta CSS-e
background: radial-gradient(circle at 50% 45%, #FDE047 0%, #FB7185 45%, #7C3AED 100%);Megosztható radial 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.
CSS gradient útmutató
Radial Sunset gradient: színek, szerkezet és felhasználási ötletek
A Radial Sunset minta naplemente radial gradient. A jelenlegi összeállítás #FDE047, #FB7185, #7C3AED színeket használ.
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
Szerkeszthető ez a gradient minta?
Igen. A minta csak kiindulópont: a színeket, stop pozíciókat, szöget vagy középpontot ugyanúgy módosíthatod, mint a generátorban.
Miért kapott ez a gradient külön URL-t?
A kurált minták önálló, megnevezhető design-kiindulópontok. Külön előnézetet, kódot, címet és tartalmi kontextust kapnak, ezért nem ugyanannak a vékony paraméteres oldalnak a másolatai.
Megoszthatom a saját módosított változatomat is?
Igen. A Megosztás gomb új URL-t készít az aktuális color stopokkal és beállításokkal. A személyes variáns megosztható, de alapértelmezetten nem kerül indexelésre.