Főbb pontok
- 01Az összes három CSS gradiens típus — lineáris, radiális és kónikus — élő előnézettel támogatott.
- 02Akár hat szín pontot adhat hozzá, mindegyik független pozícióval és szín.
- 03A kimenet egy teljes háttér deklaráció, amely készen áll bármilyen stíluslap beillesztésére.
- 04Nincs regisztrációs, nincs telepítés, és semmi sem kerül feltöltésre — minden a böngészőben fut.
Miért használj vizuális Gradient Generátort?
A CSS gradiensek kézzel írása gyorsan fárasztóvá válik. A szintaxis olvasható, ha ismered, de a pontos leállási pozíciók és a vizuális előnézet nélküli színek kiválasztása egy egyszerű tervezési döntésből DevTools próba-és-hiba próbává válik. A generátor lehetővé teszi az eredmény valós idejű megtekintését, és az azonnal tiszta kódot exportálj, ha úgy néz ki.
Ez az eszköz az összes három modern gradiens típust támogatja. A lineáris az klasszikus irányított keverékfelhasználás szöget a hero háttereknél és gomboknak. A radiális egy pontból sugárzódik — nagyszerű a pontfényes effektekhez és vignetták. A kónikus egy középpont körül söpör, így a goto pie chart szegmensekhez, szín kerekekhez és spinnerek indikátorokhoz. Kezd az egyik beépített előre beállításból (Lime Swiss, Sunset, Sky, Aurora) vagy tervezz a nulláról.
Hogyan generálj CSS Gradienseket
Az egész folyamat egy percen belül megvalósul.
- 01
Válassz egy gradiens típust
Válassza a Lineáris, Radiális vagy Kónikus közül a típus választóból. Lineárishoz állítsa be a szöget is. Az előnézet azonnal frissül.
- 02
Szín pontok hozzáadása és pozícionálása
Kattints az Pont Hozzáadása gombra egy új pont beszúrásához, majd húzd a csúszkáját vagy írj egy százalékos értéket a pozicionáláshoz. Legfeljebb hat pont támogatott — a pontok automatikusan pozíció szerint átrendezik.
- 03
Válaszd az egyes pont szín
Kattints a szín mintára a rendszer szín választó megnyitásához, vagy írd be a hex értéket közvetlenül. Mind az RGB, mind a hex formátum működik.
- 04
Előnézet valós időben
Az előnézeti panel a böngésződ natív gradiens motorjával rendereli a gradiensét, így az eredmény pontosan megegyezik azzal, amit a CSS a termelésben fog produkálni.
- 05
Másold ki a CSS deklarációt
Kattints a Másol gombra, hogy megkapd a teljes háttér: lineáris-gradiens(...) deklarációt. Illeszd be egy stíluslapba, egy stílus komponensbe, vagy egy Tailwind tetszőleges értékként, mint a bg-[<érték>].
Gyakori Gradient Felhasználási Esetek
Minden gradiens típus egy másik forgatókönyvben kitűnik.
- 01Hero rész hátterei — lineáris gradiens 135°-nál egy modern átlós söpöréshez.
- 02Gomb lebegtetési állapot — finom kétpontos lineáris gradiens a mélységhez.
- 03Radiális spotlámpa vagy vignetfa — sötét-áttetsző radiális egy kép fedőrétegre.
- 04Pie diagramok és folyamat gyűrűk — kónikus gradiens kemény leállások.
- 05Szín-kerék választó előnézetei — teljes spektrum kónikus gradiens.
- 06Szöveg gradiensek — alkalmazza a gradiensét a háttérhez, majd használja a background-clip: text.
Teljes egészében a böngészőben fut
A gradiens generátor 100% kliens oldali futtatás — nem küldöd az adatokat semmilyen szerverhez. Az előnézet a böngésződ saját CSS motorjával kerül renderelésre, amely azt jelenti, hogy amit látsz, az megegyezik azzal, amit az ugyanolyan CSS-vel minden látogató böngésző renderel.
Egy gyakorlati megjegyzés: az e-mail kliensek még mindig szaggatott támogatottsággal rendelkeznek a CSS gradienszekhez. Ha az elkészített CSS-t egy HTML e-mail sablonba illeszted, adj egy szilárd háttér-szín tartalékot a gradiens deklaráció elé, így a régebbi klienseken szereplő címzetteknek valami ésszerű megjelenik.
CSS Gradiens Generátor GYIK
Mi a különbség lineáris, radiális és kónikus gradiensek között?
A lineáris gradiensek egy adott szög alatt egy egyenes vonal mentén mennek át. A radiális gradiensek egy központi pontból sugárzódnak — hasznos a kiemelt és fleck effektekhez. A kónikus gradiensek egy középpont körül söpörnek, mint az óra mutatói — ideálisak a pie szegmensekhez és szín kerekekhez.
Használhatom ezt Tailwind CSS projektekhez?
Igen. Másold ki az elkészített értéket, és használd egy Tailwind tetszőleges értékként, például: bg-[lineáris-gradiens(135deg,#ff6b6b,#4ecdc4)]. A Tailwind beilleszti a kimeneti stíluslapba.
Az előnézet pontosan megegyezik azzal, amit az élő oldalon látok?
Igen — az előnézet az ugyanolyan böngésző gradiens motorral kerül renderelésre, amely az élő CSS-t fogja renderelni, így a kimenet pixel-pontos.
Használhatom a CSS gradienszeket e-mail sablonban?
A legtöbb e-mail kliens nem támogatja megbízhatóan a CSS gradienszeket. Mindig adj egy szilárd háttér-szín előtagot a gradiens deklaráció elé tartalékként.
Van-e limit a szín pontok számára?
A generátor legfeljebb hat pontot támogat. A legtöbb design esetében kettő-négy elegendő; hat fölött inkább csökkenti a tisztaságot, mintsem gazdagságot.