Käsittele jopa 200 kuvaa per tehtävä — valitse asetukset kerran, suorita kaikki.
Valitse kaksi tai useampi väriä, vedä gradientti makuusi ja kopioi CSS. Tai lataa PNG:nä käytettäväksi taustakuvana, diataustana tai somepostauksen taustana. Lineaariset, säteittäiset ja kartiomaiset gradientit ovat tuettuja, samoin verkkogradienttitila pehmeille Apple-tyylisille taustoille, joita näet moderneissa käyttöliittymissä.
Gradienttityypit selitettyinä
- Lineaarinen: suora viiva väristä A väriin B. Suunnanvalitsin (ylhäältä alas, diagonaali jne.).
- Säteittäinen: samankeskinen — väri A keskellä haalistuen väriin B reunoilla. Hyödyllinen kohdevalotehosteisiin.
- Kartiomainen: kiertää keskipisteen ympäri kuin väriympyrä. Trendikäs modernissa UI-suunnittelussa.
- Verkko (premium): useita väripilkkuja sulavasti sekoitettuna. "Apple-gradientti"-ilme.
Mitä voit kopioida
- CSS: valmis 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.
- Somepostauksen taustat: heti brändin mukainen ilme lainausgrafiikalle.
- Hero-osiot: gradienttitaustat ovat kaikkialla laskeutumissivuilla.
- Diat: korvaa tylsät yksiväriset taustat.
Värien valinta, jotka toimivat
Vierekkäiset väriympyrässä = hienovarainen, harmoninen. Vastakkaiset = rohkea, huomiota herättävä. Lisää kolmas keskimmäinen piste kaventaaksesi suurta eroa. Brändiuskollisille gradienteille liitä brändisi HEX ja valitse toiselle pisteelle sävy tai varjostus. Käytä Color Converter -työkaluamme löytääksesi sävyjä (HSL korkeammalla vaaleudella) tai varjostuksia (matalammalla).
Usein kysytyt kysymykset
Voinko käyttää näitä tuotannossa?
Kyllä — kopioitu CSS toimii kaikissa nykyaikaisissa selaimissa. SVG-vararatkaisut on tarjottu vanhemmille kohteille.
Entä radial gradient -selaintuki?
Universaali nykyaikaisissa selaimissa. CSS-syntaksi on yksi rivi.
Kuinka suurena PNG:n voi viedä?
Ilmainen: jopa 4K (3840×2160). Premium: 8K ja sitä suuremmat.
Ovatko mesh-gradientit vaikeita käyttää?
Verkossa ne perustuvat SVG- tai canvas-tekniikkaan. Tarjoamme sinulle litistetyn PNG-kuvan helppoa käyttöä varten sekä SVG-lähteen muokkausta varten.
Voinko tallentaa gradienttini?
Kirjaudu sisään (ilmaiseksi), niin tallennetut gradientit näkyvät kirjastossasi.
Mikä on 'kartiomainen' gradientti?
Kiertyy pisteen ympäri — kuten väriympyrä tai piirakkakaavio. Nykyaikainen CSS tukee sitä natiivisti.
Toimiiko se animoitujen gradienttien kanssa?
Vain staattinen vienti. Jos haluat animoituja taustoja, kopioi CSS ja lisää CSS-animaatio gradienttikulman ympärille.
Miksi ei vain kirjoittaisi CSS:ää käsin?
Voit kyllä — 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äripoimija kuvasta
,
Väripaletin erotin
tai
Harmaasävykääntäjä
— tai selaa kaikkia
Värityökalut työkalut.
