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, lysbildebakgrunn eller bakgrunn for sosiale medier. Lineære, radiale og koniske gradienter støttes, pluss en mesh-gradient-modus for de myke Apple-lignende bakgrunnene du ser i moderne grensesnitt.
Gradienttyper forklart
- Lineær: rett linje fra farge A til farge B. Retningsvelger (topp→bunn, diagonal, osv.).
- Radial: konsentrisk — farge A i sentrum som falmer til farge B i kantene. Nyttig for lyskasteffekter.
- Konisk: sveiper rundt et sentrum som et fargehjul. Trendy i moderne UI-design.
- Mesh (premium): flere fargeklatter som blandes jevnt. «Apple-gradient»-utseende.
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-bakgrunnsforhåndsvisning for å teste.
- Bakgrunner for sosiale innlegg: umiddelbar merkevare-tilpasset utseende for sitatgrafikk.
- Helteseksjoner: gradientbakgrunner finnes overalt på landingssider.
- Lysbildepresentasjoner: erstatt kjedelige ensfargede bakgrunner.
Velge farger som fungerer
Tilstøtende på fargehjulet = subtilt og harmonisk. Motsatt = dristig og oppmerksomhetsvekkende. Legg til et tredje stopp i midten for å bygge bro over et stort gap. For merkevare-tro gradienter, lim inn din merkevare-HEX og velg en nyanse (tint) eller skygge for det andre stoppet. Bruk vår Fargeomformer 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-fallback er tilgjengelig for eldre mål.
Hva med støtte for radielle gradienter i nettlesere?
Universell i moderne nettlesere. CSS-syntaksen er én linje.
Hvor stor kan jeg eksportere PNG-en?
Gratis: opptil 4K (3840×2160). Premium: 8K og mer.
Er mesh-gradienter vanskelige å bruke?
På nettet er de SVG- eller canvas-baserte. Vi gir deg en flatlagt 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-en 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
Fargevelger fra bilde
,
Palette-ekstraktor
eller
Gråtonekonverterer
— eller bla gjennom alle
Fargeverktøy verktøy.
