De fleste gradientverktøy gir deg bare en linje CSS. Dette verktøyet tegner gradienten på et ekte lerret og lar deg laste ned det ferdige PNG-bildet i akkurat den pikselstørrelsen du trenger - et mobilbakgrunnsbilde, et 1920x1080 skrivebordsbakgrunnsbilde, et kvadratisk innlegg eller en tilpasset størrelse. Ingenting lastes opp: bildet tegnes og lagres helt på din egen enhet, så fargene og filene dine forblir private.
Gratis Gradient Generator
Kjører helt i nettleseren - ingen opplasting, ingen registrering.
Type
Bildestørrelse
px
Fargestopp
Lagrer en ekte PNG i 1920×1080 px
Hva er en gradient generator?
En gradient generator er et verktøy som blander to eller flere farger til en jevn fargeovergang og eksporterer den som et bilde du kan laste ned. Velg fargene og stoppene dine, velg lineær eller radial, still inn størrelsen, og lagre en PNG til bakgrunnsbilde, banner eller miniatyrbilde. Alt kjøres i nettleseren din.
Slik bruker du verktøyet
- 1Velg lineær eller radial. Lineær blander farger langs en rett linje i vinkelen du stiller inn; radial sprer dem utover fra midten som en sirkel.
- 2Still inn farger og stopp. Klikk på en fargeprøve for å velge en farge, og dra i glidebryteren for å flytte stoppet. Legg til opptil 8 stopp eller fjern ned til 2, og trykk på Tilfeldig for en rask ide.
- 3Velg bildestørrelse. Trykk på en forhåndsinnstilling (datamaskin, mobil, kvadrat, sosiale medier) eller skriv inn en egendefinert bredde og høyde i piksler. Forhåndsvisningen oppdateres live.
- 4Last ned PNG-bildet. Klikk på Last ned PNG for å lagre gradienten som et bilde i full oppløsning, eller kopier CSS-koden for å gjenbruke samme gradient i kode.
Hvem passer det for
- Designere og innholdsskapere som trenger et rent gradientbakgrunnsbilde til en presentasjon, miniatyrbilde, banner eller story uten å åpne Photoshop.
- Mobil- og datamaskinbrukere som lager et tilpasset gradientbakgrunnsbilde i akkurat skjermens oppløsning.
- Utviklere som vil ha et lett gradient-PNG som plassholder eller hero-bilde, pluss tilhørende CSS for å gjenskape det i kode.
- Sosiale medier-ansvarlige som eksporterer merkevaretilpassede gradientbakgrunner i riktig størrelse til innlegg, historier og omslagsbilder.
Vanlige spørsmål
Er denne gradient generatoren gratis?
Ja - 100 % gratis, ingen registrering, ingen vannmerker og ingen begrensninger. Lag og last ned så mange gradientbilder du vil.
Blir noe lastet opp til en server?
Nei. Gradienten tegnes og lagres helt i nettleseren din ved hjelp av lerret (canvas). Ingen farger, bilder eller bruksdata sendes noe sted.
Hvilket bildeformat eksporterer den til?
Den eksporterer en PNG, som holder gradienten perfekt jevn og tapsfri uten komprimeringsartefakter. Filen lagres i hele pikselstørrelsen du stiller inn, klar til bruk som bakgrunnsbilde eller opplasting.
Hvilken størrelse bør jeg velge for et gradientbakgrunnsbilde?
Tilpass det til skjermen din. Vanlige valg er 1920x1080 for de fleste datamaskiner, 1080x1920 for en mobil i stående format, og 1080x1080 for et kvadratisk innlegg til sosiale medier. Du kan også skrive inn en egendefinert bredde og høyde på opptil 8000 piksler.
Hva er forskjellen på en lineær og en radial gradient?
En lineær gradient blander farger langs en rett linje i en vinkel du velger, slik at fargen endrer seg over bildet. En radial gradient starter fra et midtpunkt og sprer seg utover i en sirkel, slik at fargen endrer seg fra midten mot kantene.
Kan jeg få CSS-koden i tillegg til bildet?
Ja. I tillegg til det nedlastbare PNG-bildet viser verktøyet tilhørende background-image CSS. Kopier den for å gjenskape akkurat samme gradient på et nettsted eller i en app i stedet for å bruke bildefilen.
Hvordan fungerer fargestopp?
Hvert stopp parer en farge med en posisjon fra 0 % til 100 % langs gradienten. Overgangen glir jevnt mellom naboliggende stopp. Hvis du plasserer to stopp på samme posisjon, oppstår det en skarp kant i stedet for en overgang, noe som er praktisk for striper eller fargeblokk-bakgrunner.