Behandl op til 200 billeder pr. job — vælg dine indstillinger én gang, kør dem alle.
Vælg to eller flere farver, træk gradienten efter smag, kopier CSS'en. Eller download som PNG til brug som baggrund, slide-baggrund eller baggrund til sociale medier. Lineære, radiale og koniske gradients understøttes alle, plus en mesh-gradient-tilstand til de bløde Apple-inspirerede baggrunde, du ser i moderne brugergrænseflader.
Gradienttyper forklaret
- Lineær: lige linje fra farve A til farve B. Retningsvælger (top→bund, diagonal osv.).
- Radial: koncentrisk — farve A i midten, der falder over til farve B ved kanterne. Nyttigt til spotlight-effekter.
- Konisk: svinger rundt om et midtpunkt som et farvehjul. Trendy i moderne UI-design.
- Mesh (premium): flere farveklatter, der blandes jævnt. "Apple-gradient"-looket.
Hvad du kan kopiere
- CSS: klar til indsættelse
linear-gradient(...) eller background-image:-deklaration.
- Tailwind: den nærmeste
bg-gradient-*-klasse plus eventuelle tilføjelser af brugerdefinerede farver.
- SVG: til skalerbar brug i ikoner eller UI-grafik.
- PNG-download: enhver størrelse, inklusive telefonbaggrund (1284×2778), desktop (3840×2160) og kvadratisk (1080×1080).
Almindelige anvendelsestilfælde
- Telefonbaggrunde: mesh-gradients er enorme på iOS. Prøv vores iPhone Wallpaper Preview for at teste.
- Baggrunde til sociale medier: øjeblikkeligt on-brand look til citatgrafik.
- Hero-sektioner: gradientbaggrunde er overalt på landingssider.
- Slide-decks: erstat kedelige ensfarvede baggrunde.
Vælg farver, der fungerer
Naboer på farvehjulet = subtilt, harmonisk. Modsatte = dristigt, opmærksomhedsfangende. Tilføj et tredje mellemstop for at bygge bro over et stort spring. For brand-tro gradients, indsæt din brand-HEX og vælg en nuance eller skygge til det andet stop. Brug vores Color Converter til at finde nuancer (HSL med højere lysstyrke) eller skygger (lavere).
Ofte stillede spørgsmål
Kan jeg bruge disse i produktion?
Ja — kopieret CSS fungerer i alle moderne browsere. SVG-fallback er tilgængelige til ældre mål.
Hvad med browserunderstøttelse af radial gradient?
Universel i moderne browsere. CSS-syntaksen er én linje.
Hvor stor kan jeg eksportere PNG'en?
Gratis: op til 4K (3840×2160). Premium: 8K og derover.
Er mesh-gradienter svære at bruge?
På nettet er de SVG- eller canvas-baserede. Vi giver dig en flad PNG til nem brug, plus SVG-kilden til redigering.
Kan jeg gemme mine gradienter?
Log ind (gratis) og gemte gradienter vises i dit bibliotek.
Hvad er en 'konisk' gradient?
Sweeps rundt om et punkt — som et farvehjul eller et cirkeldiagram. Moderne CSS understøtter det indbygget.
Virker det til animerede gradienter?
Kun statisk eksport. Til animerede baggrunde skal du kopiere CSS'en og tilføje en CSS-animation omkring gradientvinklen.
Hvorfor ikke bare skrive CSS i hånden?
Det kan du — værktøjet gør blot den visuelle iteration hurtigere. Kopier og juster.
Om Gradient Generator
Gradient Generator er et gratis online værktøj fra Wallpapers.com, der kører helt i din browser — ingen installation, intet vandmærke, ingen e-mail-tilmelding til første forsøg.
Byg lineære eller radiale gradients med copy-paste CSS-output.
Sådan bruger du Gradient Generator
- Vælg en farve fra farveprøven eller indsæt en HEX / RGB-værdi.
- Juster outputtet — palette, kontrast, komplementære farver.
- Kopiér værdien, eller eksportér farveprøven som JSON.
Hvornår skal du bruge det
Almindelige anvendelsestilfælde inkluderer:
forberedelse af billeder til webupload, e-handelslister, sociale medieplatforme med formatbegrænsninger og konvertering af filer fra en enhed eller app til en anden.
Gratis vs Premium
Hver besøgende får en gratis prøvekørsel; loggede ind gratisbrugere får en højere daglig kvote. Abonner på
Premium
for ubegrænsede kørsler, massebehandling af op til 200 billeder pr. opgave, prioritetskø og annoncefri browsing.
Relaterede værktøjer
Leder du efter noget lidt anderledes? Prøv
Farvevælger fra billede
,
Palet-ekstraktor
eller
Gråtonekonverter
— eller gennemse alle
Farveværktøj værktøjer.
