ByBence Tools · Design
Fire linear gradient
Piros–narancs–sárga tüzes színátmenet. 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ó
%
Irány
0°
90°
180°
270°
CSS
background: linear-gradient(115deg, #FF3B30 0%, #FF7A00 48%, #FFD60A 100%);
A link megőrzi a színeket, stopokat és geometriát.
Kurált gradient minta
Fire: #FF3B30 → #FF7A00 → #FFD60A
Ez a minta piros–narancs–sárga tüzes színátmenet. A CSS közvetlenül használható, de az editorban minden pontja tovább alakítható.
Típus
linear
Színek
3
Irány
115°
CSS
linear-gradient(115deg, #FF3B30 0%, #FF7A00 …
A konkrét minta felépítése
Mitől működik a Fire gradient?
A Fire 3 color stopból épül fel: #FF3B30, #FF7A00, #FFD60A. A 115°-os irány miatt az átmenet diagonálisan vezeti végig a tekintetet a színeken. Ez a konkrét összeállítás $piros–narancs–sárga tüzes színátmenet.
Stop 1 · #FF3B30
0% pozíció · megnyitás Color Pickerben →
Stop 2 · #FF7A00
48% pozíció · megnyitás Color Pickerben →
Stop 3 · #FFD60A
100% pozíció · megnyitás Color Pickerben →
A minta CSS-e
background: linear-gradient(115deg, #FF3B30 0%, #FF7A00 48%, #FFD60A 100%);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ó
Fire gradient: színek, szerkezet és felhasználási ötletek
A Fire minta piros–narancs–sárga tüzes színátmenet. A jelenlegi összeállítás #FF3B30, #FF7A00, #FFD60A 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.