Behandle opptil 200 bilder per jobb — velg innstillingene én gang, kjør dem alle.
Velg to eller flere farger, dra gradienten etter smak, kopier CSS-en. Eller last ned som PNG for å bruke som bakgrunnsbilde, lysbildbakgrunn eller bakgrunn for sosiale innlegg. Lineære, radiale og koniske gradienter støttes, pluss en mesh-gradient-modus for de myke Apple-inspirerte bakgrunnene du ser i moderne grensesnitt.
Forklaring av gradienttyper
- Lineær: rett linje fra farge A til farge B. Retningsvelger (topp→bunn, diagonal, osv.)
- Radial: konsentrisk — farge A i midten som falmer til farge B i kantene. Nyttig for spotlyseffekter.
- Konisk: svinger rundt et sentrum som et fargehjul. Trendy i moderne UI-design.
- Mesh (premium): flere fargeklatter som smeltes jevnt. «Apple-gradient»-utseendet.
Hva du kan kopiere
- CSS: klar til å lime inn
linear-gradient(...) eller background-image:-deklarasjon.
- Tailwind: den nærmeste
bg-gradient-*-klassen pluss eventuelle tilpassede fargetillegg.
- SVG: for skalerbar bruk i ikoner eller UI-grafikk.
- PNG-nedlasting: alle størrelser, inkludert telefonbakgrunn (1284×2778), skrivebord (3840×2160) og kvadratisk (1080×1080).
Vanlige bruksområder
- Telefonbakgrunner: mesh-gradienter er store på iOS. Prøv vår iPhone Wallpaper Preview for å teste.
- Bakgrunner for sosiale innlegg: umiddelbart merkevarevennlig utseende for sitatgrafikker.
- Hero-seksjoner: gradientbakgrunner er overalt på landingssider.
- Lysbildesett: erstatt kjedelige ensfargede bakgrunner.
Velge farger som fungerer
Tilstøtende på fargehjulet = subtilt, harmonisk. Motsatt = dristig, oppmerksomhetsskapende. Legg til et tredje mellomstopp for å bygge bro over et stort gap. For merkevaretro gradienter, lim inn merkevare-HEX-en og velg en nyanse eller skygge for det andre stoppet. Bruk vår Fargekonverterer for å finne nyanser (HSL med høyere lysstyrke) eller skygger (lavere).
Ofte stilte spørsmål
Kan jeg bruke disse i produksjon?
Ja — kopiert CSS fungerer i alle moderne nettlesere. SVG-tilbakefall er tilgjengelig for eldre nettlesere.
Hva med støtte for radial gradient i nettlesere?
Universell i moderne nettlesere. CSS-syntaksen er på én linje.
Hvor stor kan jeg eksportere PNG-en?
Gratis: opptil 4K (3840×2160). Premium: 8K og utover.
Er mesh-gradienter vanskelige å bruke?
På nettet er de SVG- eller canvas-baserte. Vi gir deg en flatet PNG for enkel bruk, pluss SVG-kilden for redigering.
Kan jeg lagre gradientene mine?
Logg inn (gratis) og lagrede gradienter vises i biblioteket ditt.
Hva er en 'konisk' gradient?
Sveiper rundt et punkt – som en fargesirkel eller et sektordiagram. Moderne CSS støtter det naturlig.
Fungerer det for animerte gradienter?
Kun statisk eksport. For animerte bakgrunner, kopier CSS og legg til en CSS-animasjon rundt gradientvinkelen.
Hvorfor ikke bare skrive CSS for hånd?
Det kan du — verktøyet gjør bare den visuelle iterasjonen raskere. Kopier og juster.
Om Gradientgenerator
Gradientgenerator er et gratis nettbasert verktøy fra Wallpapers.com som kjører helt i nettleseren din — ingen installasjon, ingen vannmerke, ingen e-postpåmelding for første forsøk.
Bygg lineære eller radiale gradienter med kopier-lim CSS-utdata.
Slik bruker du Gradientgenerator
- Velg en farge fra fargeprøven eller lim inn en HEX / RGB-verdi.
- Juster resultatet — palett, kontrast, komplementærfarger.
- Kopier verdien, eller eksporter fargeprøven som JSON.
Når du bør bruke det
Vanlige bruksområder inkluderer:
forberede bilder for nettopplasting, e-handelsoppføringer, sosiale medier med formatbegrensninger, og konvertere filer fra en enhet eller app til en annen.
Gratis vs Premium
Alle besøkende får en gratis prøvekjøring; innloggede gratisbrukere får en høyere daglig kvote. Abonner på
Premium
for ubegrenset kjøring, bulkbehandling av opptil 200 bilder per jobb, prioritert kø, og annonsefri surfing.
Relaterte verktøy
Ser du etter noe litt annerledes? Prøv
Fargeplukker fra bilde
,
Palette-ekstraktor
eller
Gråtonekonverterer
— eller bla gjennom alle
Fargeverktøy verktøy.
