Kortversionen
- 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.
På den här sidan
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.
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.
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 ä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, vilket håller starka färger starka genom övergångens mitt.
<!doctype html>
<html>
<head>
<style>
html, body { margin: 0; height: 100%; }
body {
background:
radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
}
</style>
</head>
<body></body>
</html>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
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 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 och grumliga gradienter. 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.
GR·N10S·5T
Cameo Bolero
Se den här MarkenI 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.
Vanliga frågor
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å.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
