# Gradientbakgrundsbild för dator och mobil: koder och hur du gör en [Canonical HTML page](https://gradiently.design/sv/guide/gradient-wallpaper) En gradient är den perfekta bakgrundsbilden: inga detaljer som slåss med dina ikoner, inget att tröttna på och en färg som ändrar känslan i hela skärmen. Så gör du en som förblir jämn i full storlek. ## The short version - En gradientbakgrundsbild är en jämn övergång mellan färger som används som bakgrund på en dator eller telefon, vald eftersom den förblir lugn bakom ikoner, widgetar och fönster. - Gör datorbakgrunder i skärmens exakta upplösning och form, oftast 16:9, och telefonbakgrunder stående, med extra höjd över 9:16. - Stora, jämna gradienter är där bandning syns mest, så lägg till fint korn och exportera som PNG i stället för en komprimerad JPEG. - Placera gradientens ljusaste eller livligaste del bort från där ikoner, klockan och widgetar sitter. - Att blanda färger i OKLCH håller regnbågs- och komplementgradienter levande i stället för att de blir grå i mitten. En **gradientbakgrundsbild** är en jämn övergång mellan färger som används som bakgrund på en dator eller telefon. Den fungerar eftersom den inte har några detaljer som konkurrerar med ikoner, widgetar och fönster, och den ändrar hela stämningen i en skärm med enbart färg. För att göra en bra: välj en familj på tre till fem färger, blanda dem mjukt med ljuset där du vill att blicken ska vila, exportera i skärmens exakta storlek och form och lägg till fint korn så att övergången förblir jämn i stället för att visa ränder. Nedan hittar du färdiga gradienter att kopiera, metoden för att göra din egen och hur du anpassar var och en till en skärm. För fler färgkombinationer, se [gradientfärgkombinationer](https://gradiently.design/sv/guide/gradient-color-combinations). ## Idéer för gradientbakgrundsbilder, med koder Var och en av dessa är en enda CSS-gradient, så du kan förhandsgranska den i en webbläsare, anpassa färgerna och exportera den i vilken storlek som helst. De är löst ordnade från ljust till mörkt. - Korallblomning: `linear-gradient(135deg, #ff9a8b 0%, #ff6a88 45%, #ff99ac 100%)` - Morgonhimmel: `linear-gradient(160deg, #a1c4fd 0%, #c2e9fb 100%)` - Godisdis: `linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)` - Aprikossol: `linear-gradient(120deg, #f6d365 0%, #fda085 100%)` - Pastellspektrum: `linear-gradient(120deg, #ffb3b3 0%, #ffe0a3 25%, #b8f2e6 50%, #b9c6ff 75%, #e3b8ff 100%)` - Prismavirvel: `conic-gradient(from 210deg at 70% 30%, #ff7eb3, #ffb86b, #fff27a, #7affc4, #6bc7ff, #b58cff, #ff7eb3)` - Djup lagun: `linear-gradient(160deg, #134e5e 0%, #2f8f83 50%, #71b280 100%)` - Violett natt: `radial-gradient(ellipse at 30% 20%, #5b3cc4 0%, #2a1b6b 45%, #0e0a24 100%)` - Glödande skymning: `radial-gradient(ellipse at 70% 80%, #ff6a3d 0%, #8a1f5c 45%, #1a0b24 100%)` - Midnattsstål: `linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%)` Tio gradientbakgrundsbilder från ljust till mörkt. De två spektrumgradienterna håller sina färger på liknande ljushet, så de läses som ett mjukt ljus snarare än ränder. ## Så gör du en gradientbakgrundsbild 1. **Ta reda på skärmens storlek** Kolla skärminställningarna för upplösningen och telefonens specifikationer för skärmstorleken. Designa i exakt den storleken, eller större i samma form. 2. **Välj en färgfamilj** Tre till fem färger med ett tydligt samband: angränsande nyanser för lugn, ett varmt och ett svalt par för energi. [Analoga färger](https://gradiently.design/sv/guide/analogous-colors) är den enklaste vägen. 3. **Placera ljuset** Bestäm var det ljusaste området ska ligga. På en dator, bort från ikoner; på en telefon, oftast bakom klockan eller nedre mitten. 4. **Blanda mjukt** Sprid ut stoppen och blanda i OKLCH om färgerna ligger långt ifrån varandra på hjulet, så att mitten inte blir grå. 5. **Lägg till korn** Ett fint brusskikt med låg styrka. Det döljer bandning och får färgen att kännas rikare. 6. **Exportera som PNG** Förlustfri export håller övergången jämn. En hårt komprimerad JPEG är den vanligaste orsaken till ränder. Vill du bygga en i webbläsaren, ange en gradient på en helskärmssida och blanda den i OKLCH. Moderna webbläsare stöder [färginterpolation i gradienter](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), vilket håller starka färger starka genom övergångens mitt. ```html ``` En förhandsgranskning av en helskärmsgradient blandad i OKLCH, med en mjuk radiell glöd i lager ovanpå. Öppna den i en webbläsare, justera siffrorna och återskapa eller fånga den sedan i din skärms storlek. ## Former för bakgrundsbilder på dator och mobil En bakgrundsbild ser bäst ut när den är gjord för sin skärms form, inte beskuren ur en annan. De flesta datorskärmar är 16:9 eller nära det; bärbara är ofta lite högre, runt 16:10. Telefoner är mycket högre än 16:9: många är runt 9:19,5. Designa varje form för sig och låt ljuset falla på rätt ställe för var och en. - Dator 16:9: 1920 × 1080 - Bärbar 16:10: 1600 × 1000 - Hög telefon, ungefär 9:19,5: 900 × 1950 De tre formerna att planera för. Exakta pixlar varierar mellan modeller, så kontrollera din innan du exporterar. Med två eller fler skärmar kan du antingen ange en bild per skärm eller göra en bred bild i de båda skärmarnas sammanlagda bredd. Det andra alternativet låter en enda gradient flöda över skrivbordet, men skarven mellan skärmarna skär genom den, så håll ljuset borta från den kanten. Telefoner lägger till två komplikationer: låsskärmens klocka och widgetar ligger över den översta tredjedelen, och vissa telefoner flyttar bakgrundsbilden något när du lutar dem, vilket beskär kanterna. [Storlek på mobilbakgrund](https://gradiently.design/sv/guide/phone-wallpaper-size) tar upp båda i detalj. ## Hålla gradientbakgrundsbilder jämna Bakgrundsbilder visas stora, ofta på ljusa skärmar av hög kvalitet, vilket gör dem till det hårdaste testet av en gradient. De två problem du kommer att se är bandning, där en jämn övergång bryts upp i synliga steg, och grumliga mitter, där två starka färger möts i grått. ### Ger ränder och grumlighet - Närliggande, mörka färger över en stor yta - Hård JPEG-komprimering - Komplementfärger blandade i sRGB - En helt jämn övergång utan brus ### Håller den jämn - Tillräckligt färgomfång över övergången - PNG eller export i hög kvalitet - OKLCH-blandning, eller en mellanfärg - Fint korn över hela bilden De djupare förklaringarna finns i [gradientbandning](https://gradiently.design/sv/guide/gradient-banding) och [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients). För bakgrundsbilder är korn den enklaste lösningen: det bryter upp stegen så att ögat ser en sammanhängande övergång, och det får platt digital färg att kännas som film. ## Mörka eller ljusa gradientbakgrundsbilder Mörka bakgrundsbilder är skonsammare för ögonen på natten och får färgglada ikoner att sticka ut; de bandar också lättare, så kornet spelar större roll. Ljusa bakgrundsbilder känns luftiga men kan göra vit text på widgetar svår att läsa. Om din telefon växlar mellan ljust och mörkt utseende, överväg ett par: samma nyanser, en version lyft och en fördjupad. En Mark visad för sig: en levande gradient med färg, material, ljus och korn som kan renderas i vilken skärmstorlek som helst. I Gradiently kan du designa med vilken Mark som helst i egna storlekar upp till 8 000 pixlar på långsidan, så att en look kan bli bakgrund för dator, bärbar och telefon. Marks exporteras också som loopande videor på 5 till 30 sekunder om du vill ha en [levande bakgrundsbild](https://gradiently.design/sv/guide/live-wallpaper). ## FAQ ### Vilken storlek ska en gradientbakgrundsbild ha? Din skärms exakta upplösning, eller större i samma form. Datorer är oftast 16:9 eller 16:10; telefoner är högre, ofta runt 9:19,5, så kontrollera din modell. ### Varför har min gradientbakgrundsbild ränder? Det är bandning: skärmen visar en jämn övergång i synliga steg. Exportera som PNG, undvik hård komprimering och lägg till fint korn för att dölja det. ### Hur gör jag en regnbågsgradient som bakgrundsbild som inte ser billig ut? Använd en del av spektrat i stället för allt, håll färgerna på liknande ljushet och blanda i OKLCH så att färgerna förblir levande mellan stoppen. ### Är mörka bakgrundsbilder bättre för en telefon? De är lättare att titta på i svagt ljus och får ikoner att sticka ut. På telefoner med OLED-skärm kan mörka bakgrundsbilder också använda lite mindre ström, men välj den du gillar att titta på.