A legtöbb gradiens eszköz csak egy sor CSS kódot ad. Ez a generátor egy valódi canvasre rajzolja a színátmenetet, és lehetővé teszi, hogy letöltsd a kész PNG-t pontosan akkora pixelméretben, amekkorára szükséged van - telefonos háttérkép, 1920x1080-as asztali háttér, négyzet alakú közösségi média poszt vagy egyedi méret. Semmi nem kerül feltöltésre: a kép teljes egészében a te eszközödön készül és mentődik, így a színeid és fájljaid magánjellegűek maradnak.
Ingyenes Gradiens Generátor
Teljesen a böngésződben fut - feltöltés és regisztráció nélkül.
Mi az a gradiens generátor?
A gradiens generátor egy eszköz, amely két vagy több színt olvaszt össze sima átmenetté, majd exportálja letölthető képként. Válaszd ki a színeket és a színátmeneti pontokat, döntsd el, hogy lineáris vagy sugárirányú legyen, állítsd be a méretet, és mentsd el PNG-ként háttérképnek, bannernek vagy indexképnek. Az egész a böngésződben fut.
Így működik
- 1Válassz lineáris vagy sugárirányú típust. A lineáris színátmenet egy egyenes mentén keveri a színeket, a te szögbeállításod szerint; a sugárirányú a középpontból kifelé, körkörösen terjeszti szét azokat.
- 2Állítsd be a színeket és a színátmeneti pontokat. Kattints egy színmintára a szín kiválasztásához, majd húzd a csúszkát a pont mozgatásához. Adj hozzá akár 8 pontot, vagy vegyél el belőlük 2-ig, és nyomd meg a Véletlenszerűt egy gyors ötletért.
- 3Válaszd ki a kép méretét. Érints meg egy előre beállított méretet (asztali, telefon, négyzet, közösségi média), vagy add meg egyedi szélességet és magasságot pixelben. Az előnézet élőben frissül.
- 4Töltsd le a PNG-t. Kattints a PNG letöltése gombra, hogy elmentsd a gradienst teljes felbontású képként, vagy másold ki a CSS kódot, hogy ugyanazt a színátmenetet kódban is felhasználhasd.
Kinek hasznos
- Dizájnereknek és tartalomkészítőknek, akiknek letisztult gradiens háttérkép kell egy diához, indexképhez, bannerhez vagy sztorihoz, Photoshop megnyitása nélkül.
- Telefon- és asztali gép felhasználóknak, akik egyedi gradiens háttérképet készítenek pontosan a képernyőjük felbontásában.
- Fejlesztőknek, akik egy könnyű gradiens PNG-t szeretnének helykitöltőnek vagy hero képnek, plusz a hozzá tartozó CSS kódot, hogy kódban is reprodukálhassák.
- Közösségimédia-menedzsereknek, akik márkához illő gradiens hátteret exportálnak posztokhoz, sztorikhoz és borítóképekhez megfelelő méretben.
Gyakori kérdések
Ingyenes ez a gradiens generátor?
Igen - 100%-ban ingyenes, regisztráció, vízjel és korlátozás nélkül. Készíts és tölts le annyi gradiens képet, amennyit csak szeretnél.
Feltöltődik bármi is egy szerverre?
Nem. A színátmenet teljes egészében a böngésződben készül és mentődik canvas segítségével. Semmilyen szín, kép vagy használati adat nem kerül elküldésre sehova.
Milyen képformátumba exportál?
PNG formátumba exportál, ami tökéletesen simán és veszteségmentesen tartja meg a színátmenetet, tömörítési hibák nélkül. A fájl a beállított teljes pixelméretben mentődik, készen áll háttérképnek, háttérnek vagy feltöltésre.
Milyen méretben készítsek gradiens háttérképet?
Igazítsd a képernyődhöz. A leggyakoribb választások: 1920x1080 a legtöbb asztali gépnek, 1080x1920 álló telefonos képernyőnek, és 1080x1080 négyzet alakú közösségi média poszthoz. Bármilyen egyedi szélességet és magasságot is megadhatsz, akár 8000 pixelig.
Mi a különbség a lineáris és a sugárirányú színátmenet között?
A lineáris színátmenet egy egyenes mentén, az általad választott szögben keveri a színeket, így a szín a kép mentén változik. A sugárirányú színátmenet egy középponttól indul, és körkörösen terjed kifelé, így a szín a középponttól a szélek felé változik.
Megkaphatom a CSS kódot is a kép mellett?
Igen. A letölthető PNG mellett az eszköz megjeleníti a hozzá tartozó background-image CSS kódot is. Másold ki, hogy pontosan ugyanazt a színátmenetet reprodukáld egy weboldalon vagy alkalmazásban, a képfájl használata helyett.
Hogyan működnek a színátmeneti pontok?
Minden pont egy színt párosít egy 0% és 100% közötti pozícióval a színátmenet mentén. Az átmenet simán megy végbe a szomszédos pontok között. Ha két pontot ugyanarra a pozícióra teszel, éles határvonalat kapsz elmosódás helyett, ami jól jön csíkokhoz vagy tömör színblokkos háttérhez.