Useimmat liukuvärityökalut antavat sinulle vain rivin CSS-koodia. Tämä työkalu piirtää liukuvärin oikealle kankaalle ja antaa sinun ladata valmiin PNG-kuvan tarkasti sen kokoisena kuin tarvitset - puhelimen taustakuvaksi, 1920x1080 tietokoneen taustakuvaksi, neliömäiseksi someseinäksi tai mihin tahansa mukautettuun kokoon. Mitään ei ladata palvelimelle: kuva piirretään ja tallennetaan kokonaan omalla laitteellasi, joten värisi ja tiedostosi pysyvät yksityisinä.
Ilmainen Liukuvärigeneraattori
Toimii kokonaan selaimessasi - ei lähetyksiä, ei rekisteröitymistä.
Tyyppi
Kuvan koko
px
Väripysähdykset
Tallentaa oikean PNG-kuvan koossa 1920×1080 px
Mikä on liukuvärigeneraattori?
Liukuvärigeneraattori on työkalu, joka sekoittaa kaksi tai useamman värin pehmeäksi liukuvärksi ja vie sen kuvaksi, jonka voit ladata. Valitse värit ja pysähdyskohdat, valitse lineaarinen tai sateenkaarimainen, aseta koko ja tallenna PNG taustakuvaksi, bannerin tai pikkukuvan pohjaksi. Kaikki toimii selaimessasi.
Näin se toimii
- 1Valitse lineaarinen tai sateenkaarimainen. Lineaarinen sekoittaa värit suoraa linjaa pitkin asettamassasi kulmassa; sateenkaarimainen levittää ne keskipisteestä ulospäin ympyränä.
- 2Aseta värit ja pysähdyskohdat. Napsauta väriruutua valitaksesi värin ja vedä liukusäädintä siirtääksesi pysähdyskohtaa. Lisää enintään 8 pysähdyskohtaa tai poista aina kahteen asti, ja paina Satunnaista nopean idean saamiseksi.
- 3Valitse kuvan koko. Napauta esiasetusta (tietokone, puhelin, neliö, some) tai kirjoita mukautettu leveys ja korkeus pikseleinä. Esikatselu päivittyy livenä.
- 4Lataa PNG-kuva. Napsauta Lataa PNG tallentaaksesi liukuvärin kuvaksi täydessä resoluutiossa, tai kopioi CSS-koodi käyttääksesi samaa liukuväriä koodissa.
Kenelle
- Suunnittelijat ja sisällöntekijät, jotka tarvitsevat siistin liukuväritaustan diaan, pikkukuvaan, banneriin tai tarinaan avaamatta Photoshopia.
- Puhelimen ja tietokoneen käyttäjät, jotka tekevät mukautetun liukuväritaustakuvan tarkasti näyttönsä resoluutiossa.
- Kehittäjät, jotka haluavat kevyen liukuväri-PNG:n paikkamerkiksi tai hero-kuvaksi, sekä vastaavan CSS-koodin sen toistamiseksi.
- Somevastaavat, jotka vievät brändin mukaisia liukuväritaustoja julkaisuihin, tarinoihin ja kansikuviin sopivassa koossa.
Usein kysyttyä
Onko tämä liukuvärigeneraattori ilmainen?
Kyllä - 100 % ilmainen, ei rekisteröitymistä, ei vesileimoja eikä rajoituksia. Tee ja lataa niin monta liukuvärikuvaa kuin haluat.
Ladataanko mitään palvelimelle?
Ei. Liukuväri piirretään ja tallennetaan kokonaan selaimessasi canvas-tekniikalla. Värejä, kuvia tai käyttötietoja ei lähetetä minnekään.
Missä kuvamuodossa se viedään?
Se viedään PNG-muodossa, joka pitää liukuvärin täysin pehmeänä ja häviöttömänä ilman pakkausvirheitä. Tiedosto tallennetaan asettamassasi täydessä pikselikoossa, valmiina käytettäväksi taustakuvana tai ladattavaksi muualle.
Minkä kokoisen liukuväritaustakuvan pitäisi tehdä?
Sovita se näyttöösi. Yleisiä valintoja ovat 1920x1080 useimmille tietokoneille, 1080x1920 puhelimelle pystyasennossa ja 1080x1080 neliömäiselle somejulkaisulle. Voit myös syöttää minkä tahansa mukautetun leveyden ja korkeuden aina 8000 pikseliin asti.
Mitä eroa on lineaarisella ja sateenkaarimaisella liukuvärillä?
Lineaarinen liukuväri sekoittaa värit suoraa linjaa pitkin valitsemassasi kulmassa, joten väri muuttuu kuvan poikki. Sateenkaarimainen liukuväri alkaa keskipisteestä ja leviää ulospäin ympyränä, joten väri muuttuu keskeltä reunoja kohti.
Saanko myös CSS-koodin kuvan lisäksi?
Kyllä. Ladattavan PNG-kuvan lisäksi työkalu näyttää vastaavan background-image CSS-koodin. Kopioi se toistaaksesi täsmälleen saman liukuvärin verkkosivustolla tai sovelluksessa kuvatiedoston käyttämisen sijaan.
Miten värien pysähdyskohdat toimivat?
Jokainen pysähdyskohta yhdistää värin sijaintiin väliltä 0 % - 100 % liukuvärin matkalla. Siirtymä kulkee pehmeästi vierekkäisten pysähdyskohtien välillä. Kahden pysähdyskohdan asettaminen samaan kohtaan luo terävän rajan pehmeän siirtymän sijaan, mikä sopii raidoille tai värilohkotaustoille.