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, kopiér CSS'en. Eller download som en PNG til brug som baggrund, en slide-baggrund eller en social-post baggrund. Lineære, radiale og koniske gradienter understøttes alle, plus en mesh-gradient-tilstand til de bløde Apple-stil baggrunde, du ser i moderne UI'er.
Gradienttyper forklaret
- Lineær: lige linje fra farve A til farve B. Retningsvælger (top→bund, diagonal osv.).
- Radial: koncentrisk — farve A i centrum falder over til farve B ved kanterne. Nyttig til spotlight-effekter.
- Konisk: svinger omkring et centrum som et farvehjul. Trendy i moderne UI-design.
- Mesh (premium): flere farveklatter blandet jævnt. "Apple gradient"-looket.
Hvad du kan kopiere
- CSS: færdig til at indsætte
linear-gradient(...) eller background-image: erklæring.
- Tailwind: den nærmeste
bg-gradient-* klasse plus eventuelle tilpassede farvetilføjelser.
- 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 brugssituationer
- Telefonbaggrunde: mesh-gradienter er store på iOS. Prøv vores iPhone Wallpaper Preview for at teste.
- Social-post baggrunde: øjeblikkeligt on-brand look til citatgrafik.
- Hero-sektioner: gradientbaggrunde er overalt på landingssider.
- Slide-decks: erstat kedelige solide baggrunde.
Valg af farver der virker
Tilstødende på farvehjulet = subtilt, harmonisk. Modsat = dristigt, opmærksomhedsfangende. Tilføj et tredje midterstop for at bygge bro over et bredt hul. For brand-tro gradienter, indsæt dit 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 lyshed) 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ængeligt for ældre systemer.
Hvad med browserunderstøttelse for radiale gradienter?
Universel i moderne browsere. CSS-syntaksen er en enkelt linje.
Hvor stor kan jeg eksportere PNG'en?
Gratis: op til 4K (3840×2160). Premium: 8K og derover.
Er mesh-gradients svære at bruge?
På nettet er de SVG- eller canvas-baserede. Vi giver dig en fladlagt 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?
Svinger omkring 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.
Why not just hand-write CSS?
You can — the tool just makes the visual iteration faster. Copy and tweak.
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 gradienter med kopiér-indsæt 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
,
Palette Extractor
eller
Grayscale-konverter
— eller gennemse alle
Farveværktøj værktøjer.
