Kortversjonen
- Et bakgrunnsbilde med gradient er en jevn fargeovergang brukt som bakgrunn på PC eller mobil, valgt fordi den holder seg rolig bak ikoner, widgeter og vinduer.
- Lag bakgrunnsbilder til PC i skjermens nøyaktige oppløsning og i dens egen form, som regel 16:9, og bakgrunnsbilder til mobil høye, med ekstra høyde utover 9:16.
- Store, jevne gradienter er der banding vises mest, så legg til fint korn og eksporter som PNG i stedet for en komprimert JPEG.
- Plasser den lyseste eller travleste delen av gradienten unna der ikoner, klokken og widgeter ligger.
- Å blande farger i OKLCH holder regnbuegradienter og komplementære gradienter livlige i stedet for at de blir grå på midten.
På denne siden
Et bakgrunnsbilde med gradient er en jevn fargeovergang brukt som bakgrunn på en PC eller mobil. Det fungerer fordi det ikke har detaljer som konkurrerer med ikoner, widgeter og vinduer, og det endrer hele stemningen på en skjerm med farge alene. Slik lager du et godt: velg en familie på tre til fem farger, bland dem mykt med lyset der du vil at øyet skal hvile, eksporter i skjermens nøyaktige størrelse og form, og legg til fint korn så overgangen holder seg jevn i stedet for å vise striper.
Nedenfor finner du ferdige gradienter du kan kopiere, metoden for å lage dine egne, og hvordan du tilpasser hver til en skjerm. Flere fargekombinasjoner finner du i fargekombinasjoner for gradienter.
Ideer til gradientbakgrunner med koder
Hver av disse er én enkelt CSS-gradient, så du kan forhåndsvise den i en nettleser, tilpasse fargene og eksportere den i en hvilken som helst størrelse. De er løst gruppert fra lyst til mørkt.
Slik lager du et bakgrunnsbilde med gradient
- 1
Finn størrelsen på skjermen din
Sjekk oppløsningen i skjerminnstillingene, og skjermstørrelsen i spesifikasjonene til telefonen. Design i nøyaktig den størrelsen, eller større i samme form.
- 2
Velg en fargefamilie
Tre til fem farger med et tydelig slektskap: nabofargetoner for ro, et varmt og et kjølig par for energi. Analoge farger er den enkleste veien.
- 3
Plasser lyset
Bestem hvor det lyseste området skal være. På en PC, unna ikonene; på en mobil, som regel bak klokken eller nederst på midten.
- 4
Bland jevnt
Spre stoppene, og bland i OKLCH hvis fargene ligger langt fra hverandre på sirkelen, så midten ikke blir grå.
- 5
Legg til korn
Et fint støylag med lav styrke. Det skjuler banding og får fargen til å føles rikere.
- 6
Eksporter som PNG
Tapsfri eksport holder overgangen jevn. En hardt komprimert JPEG er den vanligste årsaken til striper.
Vil du bygge et i nettleseren, setter du en gradient på en fullskjermside og blander den i OKLCH. Moderne nettlesere støtter fargeinterpolering i gradienter, som holder livlige farger livlige gjennom midten av overgangen.
<!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 for bakgrunnsbilder til PC og mobil
Et bakgrunnsbilde ser best ut når det er laget for skjermens form, ikke beskåret fra en annen. De fleste PC-skjermer er 16:9 eller nær det; bærbare er ofte litt høyere, rundt 16:10. Telefoner er mye høyere enn 16:9: mange ligger rundt 9:19,5. Design hver form for seg, og la lyset falle på riktig sted i hver.
PC 16:9
1920 × 1080
Bærbar 16:10
1600 × 1000
Høy telefon, omtrent 9:19,5
900 × 1950
Med to eller flere skjermer kan du enten sette ett bilde per skjerm eller lage ett bredt bilde i den samlede bredden til begge. Det andre alternativet lar én gradient flyte over hele pulten, men skjøten mellom skjermene skjærer gjennom den, så hold lyset unna den kanten.
Telefoner gir to komplikasjoner: klokken og widgetene på låseskjermen ligger over den øverste tredjedelen, og noen telefoner flytter bakgrunnsbildet litt når du vipper dem, noe som beskjærer kantene. Størrelse på bakgrunnsbilde til mobil går gjennom begge deler i detalj.
Hold gradientbakgrunner jevne
Bakgrunnsbilder vises stort, ofte på lyse skjermer av høy kvalitet, og det gjør dem til den hardeste testen av en gradient. De to problemene du kommer til å se, er banding, der en jevn overgang brytes opp i synlige trinn, og grumsete midter, der to sterke farger møtes i grått.
Gir striper og grums
- Nære, mørke farger over et stort område
- Kraftig JPEG-komprimering
- Komplementærfarger blandet i sRGB
- En helt glatt overgang uten støy
Holder det jevnt
- Nok fargespenn gjennom overgangen
- PNG eller eksport i høy kvalitet
- Blanding i OKLCH, eller en farge på midtpunktet
- Fint korn over hele bildet
De dypere forklaringene står i banding i gradienter og grumsete gradienter. For bakgrunnsbilder er korn den enkleste løsningen: det bryter opp trinnene så øyet ser én sammenhengende overgang, og det får flat digital farge til å føles som film.
Mørke eller lyse gradientbakgrunner
Mørke bakgrunnsbilder er mer behagelige for øynene om kvelden og får fargerike ikoner til å skille seg ut; de får også lettere banding, så kornet betyr mer. Lyse bakgrunnsbilder føles luftige, men kan gjøre hvit tekst på widgeter vanskelig å lese. Hvis telefonen din bytter mellom lyst og mørkt utseende, kan du vurdere et par: de samme fargetonene, én versjon løftet og én gjort dypere.
GR·N10S·5T
Cameo Bolero
Se denne MarkenI Gradiently kan du designe med hvilken som helst Mark i egendefinerte størrelser opptil 8000 piksler på den lengste siden, så ett uttrykk kan bli bakgrunnsbilde til PC, bærbar og mobil. Marks eksporteres også som loopvideoer på 5 til 30 sekunder hvis du vil ha en levende bakgrunn.
Spørsmål folk stiller
Hvilken størrelse bør et bakgrunnsbilde med gradient ha?
Skjermens nøyaktige oppløsning, eller større i samme form. PC-skjermer er som regel 16:9 eller 16:10; telefoner er høyere, ofte rundt 9:19,5, så sjekk modellen din.
Hvorfor har gradientbakgrunnen min striper?
Det er banding: skjermen viser en jevn overgang i synlige trinn. Eksporter som PNG, unngå kraftig komprimering, og legg til fint korn for å skjule det.
Hvordan lager jeg et bakgrunnsbilde med regnbuegradient som ikke ser billig ut?
Bruk en del av spekteret i stedet for hele, hold fargene på lignende lyshet, og bland i OKLCH så fargene holder seg livlige mellom stoppene.
Er mørke bakgrunnsbilder bedre for en telefon?
De er lettere å se på i svakt lys og får ikonene til å skille seg ut. På telefoner med OLED-skjerm kan mørke bakgrunnsbilder også bruke litt mindre strøm, men velg det du liker å se på.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
