A gradiens szintaxisát kézzel megírni bajos: a szög, a megállók sorrendje és a százalékos pozíciók kölcsönhatásban vannak egymással, egyetlen elgépelés pedig csendben tönkreteszi az egész background tulajdonságot. Ez a generátor tökéletes szinkronban tartja az előnézetet és a kódot - amit látsz, az karakterre pontosan az a CSS, amit kimásolsz. Teljesen a böngésződben fut, így semmi, amit megtervezel, nem kerül fel sehova.
Ingyenes CSS Gradient Generator
Teljesen a böngésződben fut - feltöltés és regisztráció nélkül.
Típus
Szín-megállók
CSS kód
Mi az a CSS gradient generator?
A CSS gradient generator egy vizuális eszköz, amely helyetted megírja a linear-gradient(), radial-gradient() vagy conic-gradient() kódot. Kiválasztod a színeket, húzod a megállók pozícióját, beállítod a szöget, és a másolásra kész CSS kód azonnal megjelenik, miközben az élő előnézet pontosan megmutatja, mit fog megjeleníteni a böngésző. Minden a böngésződben zajlik.
Így működik
- 1Válaszd ki a gradiens típusát. Válassz lineáris, sugárirányú vagy kúpos típust. A lineárisnál szögcsúszka jelenik meg; a sugárirányúnál alak (kör vagy ellipszis) és pozíció is beállítható; a kúposnál kezdőszög és pozíció adható meg.
- 2Állítsd be a szín-megállókat. Kattints minden mintára a szín kiválasztásához, majd húzd a csúszkáját, hogy a megállót a gradiens mentén mozgasd. Adj hozzá akár 8 megállót, vagy vegyél el belőlük 2-ig.
- 3Állítsd be az irányt. Húzd a szögcsúszkát (0-360 fok) vagy válassz egy pozíció kulcsszót. Az előnézet minden változtatásnál élőben frissül.
- 4Másold ki a CSS kódot. Kattints a Copy gombra a background deklaráció megszerzéséhez, amely tartalmazza az egyszínű tartalék sort is, majd illeszd be a stíluslapodba.
Kinek hasznos
- Frontend fejlesztők, akiknek háttér kell egy hero szekcióhoz, kártyához vagy gombhoz, és a pontos
linear-gradient()sort akarják anélkül, hogy fejből tudnák a szintaxist. - Webes és UI dizájnerek, akik egy mockupot próbálnak visszaadni: vizuálisan újraalkotják a színátmenetet, majd a generált CSS-t egyből átadják a fejlesztőcsapatnak.
- Email- és landing oldal-készítők, akiknek egyszínű tartalék sorra van szükségük, hogy a dizájn szépen leépüljön régebbi kliensekben - a végeredmény ezt automatikusan tartalmazza.
- CSS-t tanuló diákok, akik valós időben szeretnék látni, hogyan változtatja a szög, a szín-megállók és a gradiens típusa a megjelenő eredményt.
Gyakori kérdések
Ingyenes ez a CSS gradient generator?
Igen - 100%-ban ingyenes, regisztráció, vízjel és korlátozás nélkül. Készíts annyi gradienst, amennyit csak akarsz, és másold a CSS kódot egyenesen a projektedbe.
Feltölt valamit egy szerverre?
Nem. A gradiens teljes egészében a böngésződben épül fel és jelenik meg előnézetben, egyszerű JavaScripttel. Semmilyen szín, kód vagy használati adat nem kerül elküldésre sehová.
Mi a különbség a lineáris, a sugárirányú és a kúpos gradiens között?
A lineáris gradiens egy egyenes vonal mentén, az általad választott szögben keveri a színeket. A sugárirányú gradiens egy középpontból sugárzik kifelé, kör vagy ellipszis alakban. A kúpos gradiens a színeket egy középpont körül forgatja, hasonlóan egy színkerékhez vagy egy kördiagramhoz.
Hogyan működnek a szín-megállók a CSS gradiensekben?
Minden megálló egy színt párosít a gradiens vonal mentén egy 0% és 100% közötti pozícióval. A böngésző a szomszédos megállók között simán keveri a színeket. Ha két megállót ugyanarra a pozícióra teszel, éles határvonal jön létre keveredés helyett - ez hasznos csíkokhoz vagy kördiagram-effektekhez.
Mely böngészők támogatják ezeket a gradienseket?
Minden modern böngésző - a Chrome, a Firefox, a Safari és az Edge - támogatja az előtag nélküli linear-gradient() és radial-gradient() függvényt; a conic-gradient() 2020 óta mindenhol támogatott. A kimásolt kód emellett egy egyszínű tartalékot is tartalmaz a régebbi böngészőkhöz.
Használhatom a generált gradienst szövegszínként?
Közvetlenül nem - a gradiensek képek, nem színek. Alkalmazd a gradienst background-image-ként a szöveges elemen, majd add hozzá a background-clip: text és color: transparent tulajdonságokat, hogy a gradiens átlátsszon a betűkön.
Miért látszanak sávok (banding) a gradiensemen?
A sávosodás akkor jelenik meg, ha két távoli megálló hasonló árnyalatok között, hosszú szakaszon keveredik, és ezzel felfedi a 8 bites színlépéseket. Csökkentheted egy köztes szín-megálló hozzáadásával, a keverési távolság rövidítésével, vagy olyan színek választásával, amelyek fényerőben és árnyalatban is eltérnek.