Käsittele jopa 200 kuvaa per tehtävä — valitse asetukset kerran, suorita kaikki.
Valitse kaksi tai useampi väriä, vedä gradientti mieleiseksesi, kopioi CSS. Tai lataa PNG:nä käytettäväksi taustakuvana, diojen taustana tai somejulkaisun taustana. Lineaariset, säteittäiset ja kartiomaiset gradientit ovat kaikki tuettuja, sekä verkkogradienttitila pehmeille Apple-tyylisille taustoille, joita näet moderneissa käyttöliittymissä.
Gradienttityypit selitettynä
- Lineaarinen: suora viiva väristä A väriin B. Suunnanvalitsin (ylhäältä alas, vinottain jne.).
- Säteittäinen: samankeskinen — väri A keskellä haalistuen väriin B reunoilla. Hyödyllinen kohdevalotehosteisiin.
- Kartiomainen: pyyhkäisee keskipisteen ympäri kuten väriympyrä. Trendikäs moderneissa käyttöliittymissä.
- Verkko (premium): useita väripalloja sulavasti sekoitettuna. "Apple-gradientin" ilme.
Mitä voit kopioida
- CSS: valmiina liitettäväksi
linear-gradient(...) tai background-image:-määrittely.
- Tailwind: lähin
bg-gradient-*-luokka sekä mahdolliset mukautetut värit.
- SVG: skaalautuvaan käyttöön kuvakkeissa tai UI-grafiikassa.
- PNG-lataus: mikä tahansa koko, mukaan lukien puhelimen taustakuva (1284×2778), työpöytä (3840×2160) ja neliö (1080×1080).
Yleiset käyttötapaukset
- Puhelimen taustakuvat: verkkogradientit ovat suosittuja iOS:ssä. Kokeile iPhone Wallpaper Preview -työkaluamme testataksesi.
- Somejulkaisujen taustat: välitön brändinmukainen ilme lainausgrafiikalle.
- Hero-osiot: gradienttitaustat ovat kaikkialla laskeutumissivuilla.
- Diasarjat: korvaa tylsät yksiväriset taustat.
Toimivien värien valinta
Väriympyrällä vierekkäiset = hienovarainen, harmoninen. Vastakkaiset = rohkea, huomiota herättävä. Lisää kolmas välipysäkki kuroakseen suuren kuilun. Brändiuskollisille gradienteille liitä brändisi HEX ja valitse sävy tai varjostus toiselle pysäkille. Käytä Color Converter -työkaluamme löytääksesi sävyjä (HSL korkeammalla vaaleudella) tai varjostuksia (alhaisemmalla).
Usein kysytyt kysymykset
Voinko käyttää näitä tuotannossa?
Kyllä — kopioitu CSS toimii kaikissa nykyaikaisissa selaimissa. SVG-varavaihtoehdot ovat tarjolla vanhemmille kohteille.
Entä radiaaligradientin selaintuki?
Yleinen nykyselaimissa. CSS-syntaksi on yksi rivi.
Kuinka suuren PNG:n voin viedä?
Ilmainen: jopa 4K (3840×2160). Premium: 8K ja sitä suurempi.
Ovatko verkkoliukuvärit vaikeita käyttää?
Verkossa ne ovat SVG- tai canvas-pohjaisia. Annamme sinulle litistetyn PNG:n helppoa käyttöä varten sekä SVG-lähdetiedoston muokkausta varten.
Voinko tallentaa liukuvärini?
Kirjaudu sisään (ilmaiseksi), niin tallennetut liukuvärit näkyvät kirjastossasi.
Mikä on 'kartiogradientti'?
Kiertää pisteen ympäri — kuten väriympyrä tai piirakkadiagrammi. Moderni CSS tukee sitä natiivisti.
Toimiiko se animoitujen liukuvärjäysten kanssa?
Vain staattinen vienti. Jos haluat animoituja taustoja, kopioi CSS ja lisää CSS-animaatio liukuvärin kulman ympärille.
Miksi ei vain kirjoittaa CSS:ää käsin?
Voit — työkalu vain nopeuttaa visuaalista iterointia. Kopioi ja hienosäädä.
Tietoja Gradient Generator
Gradient Generator on ilmainen verkkotyökalu Wallpapers.com-sivustolta, joka toimii kokonaan selaimessasi — ei asennusta, ei vesileimaa, ei sähköposti-ilmoittautumista ensimmäiselle kokeilulle.
Rakenna lineaarisia tai säteittäisiä gradientteja kopioi-liitä CSS-tulosteella.
Käyttöohje Gradient Generator
- Valitse väri värikartasta tai liitä HEX/RGB-arvo.
- Säädä lopputulosta — paletti, kontrasti, täydentävät värit.
- Kopioi arvo tai vie värikartta JSON-muodossa.
Milloin käyttää
Yleisiä käyttötapauksia ovat:
kuvien valmistelu webiin, verkkokauppalistauksiin, somealustoille muotovaatimuksineen sekä tiedostojen muuntaminen laitteelta tai sovelluksesta toiseen.
Ilmainen vs Premium
Jokainen kävijä saa ilmaisen koeajon; kirjautuneet ilmaiskäyttäjät saavat korkeamman päivittäisen kiintiön. Tilaa
Premium
saadaksesi rajoittamattomat ajot, eräkäsittelyn jopa 200 kuvaa työtä kohden, prioriteettijonon ja mainoksettoman selailun.
Liittyvät työkalut
Etsitkö jotain hieman erilaista? Kokeile
Väripoimuri kuvasta – Napsauta saadaksesi minkä tahansa pikselin HEX
,
Palette Extractor
tai
Harmaasävykääntäjä
— tai selaa kaikkia
Värityökalut työkalut.
