ByBence Tools · Design
Conic Purple conic gradient
Sötét lila conic gradient. Nyisd meg a mintát, módosítsd a color stopokat, majd másold a kész CSS-t.
Color stopok
4/8 pont · a sávon húzhatók
Pont 1
Pozíció
%
Pont 2
Pozíció
%
Pont 3
Pozíció
%
Pont 4
Pozíció
%
Kezdőszög
0°
90°
180°
270°
Középpont X
Középpont Y
CSS
background: conic-gradient(from 45deg at 50% 50%, #111827 0%, #7C3AED 40%, #EC4899 72%, #111827 100%);
A link megőrzi a színeket, stopokat és geometriát.
Kurált gradient minta
Conic Purple: #111827 → #7C3AED → #EC4899 → #111827
Ez a minta sötét lila conic gradient. A CSS közvetlenül használható, de az editorban minden pontja tovább alakítható.
Típus
conic
Színek
4
Irány
körkörös
CSS
conic-gradient(from 45deg at 50% 50%, #11182…
A konkrét minta felépítése
Mitől működik a Conic Purple gradient?
A Conic Purple 4 color stopból épül fel: #111827, #7C3AED, #EC4899, #111827. A körkörös elrendezés a színeket a középpont körül forgatja végig. Ez a konkrét összeállítás $sötét lila conic gradient.
Stop 1 · #111827
0% pozíció · megnyitás Color Pickerben →
Stop 2 · #7C3AED
40% pozíció · megnyitás Color Pickerben →
Stop 3 · #EC4899
72% pozíció · megnyitás Color Pickerben →
Stop 4 · #111827
100% pozíció · megnyitás Color Pickerben →
A minta CSS-e
background: conic-gradient(from 45deg at 50% 50%, #111827 0%, #7C3AED 40%, #EC4899 72%, #111827 100%);Megosztható conic 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ó
Conic Purple gradient: színek, szerkezet és felhasználási ötletek
A Conic Purple minta sötét lila conic gradient. A jelenlegi összeállítás #111827, #7C3AED, #EC4899, #111827 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.