De korte versie
- Een gradient wallpaper is een vloeiend verloop van kleuren als achtergrond van een desktop of telefoon, gekozen omdat het rustig blijft achter iconen, widgets en vensters.
- Maak wallpapers voor de desktop op de exacte resolutie en in de vorm van je scherm, meestal 16:9, en wallpapers voor de telefoon hoog, met extra hoogte boven 9:16.
- In grote, gladde kleurverlopen valt banding het meest op, dus voeg fijne korrel toe en exporteer als PNG in plaats van als gecomprimeerde JPEG.
- Zet het lichtste of drukste deel van het kleurverloop weg van de plek waar iconen, de klok en widgets staan.
- Kleuren mengen in OKLCH houdt regenboogverlopen en complementaire kleurverlopen levendig, in plaats van dat ze grijs worden in het midden.
Op deze pagina
Een gradient wallpaper is een vloeiend verloop van kleuren dat je als achtergrond van een desktop of telefoon gebruikt. Het werkt omdat het geen details heeft die met iconen, widgets en vensters concurreren, en het verandert de hele sfeer van een scherm met alleen kleur. Zo maak je een goede: kies een familie van drie tot vijf kleuren, meng ze zacht met het licht op de plek waar het oog mag rusten, exporteer op de exacte grootte en vorm van je scherm en voeg fijne korrel toe, zodat het verloop glad blijft en geen strepen toont.
Hieronder vind je kant-en-klare kleurverlopen om te kopiëren, de methode om er zelf een te maken en hoe je elk op een scherm laat passen. Voor meer kleurcombinaties, zie kleurcombinaties voor kleurverlopen.
Ideeën voor een gradient wallpaper, met codes
Elk hiervan is één CSS-kleurverloop, dus je kunt het in een browser bekijken, de kleuren aanpassen en het op elk formaat exporteren. Ze zijn losjes gegroepeerd van licht naar donker.
Zo maak je een gradient wallpaper
- 1
Zoek de grootte van je scherm op
Kijk in je beeldscherminstellingen voor de resolutie, en in de specificaties van je telefoon voor de schermgrootte. Ontwerp op precies die grootte, of groter in dezelfde vorm.
- 2
Kies een kleurfamilie
Drie tot vijf kleuren met een duidelijke relatie: naburige tinten voor rust, een warm en een koel paar voor energie. Analoge kleuren zijn de makkelijkste route.
- 3
Plaats het licht
Bepaal waar het helderste deel komt. Op een desktop weg van de iconen, op een telefoon meestal achter de klok of onder het midden.
- 4
Meng vloeiend
Spreid de stops, en meng in OKLCH als kleuren ver uit elkaar liggen op de cirkel, zodat het midden niet grijs wordt.
- 5
Voeg korrel toe
Een fijne ruislaag op lage sterkte. Het verbergt banding en laat de kleur rijker aanvoelen.
- 6
Exporteer als PNG
Exporteren zonder verlies houdt het verloop glad. Een zwaar gecomprimeerde JPEG is de meest voorkomende oorzaak van strepen.
Wil je er een in de browser bouwen, zet dan een kleurverloop op een pagina op volledig scherm en meng het in OKLCH. Moderne browsers ondersteunen kleurinterpolatie in kleurverlopen, wat felle kleuren fel houdt door het midden van het verloop.
<!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>Vormen van wallpapers voor desktop en telefoon
Een wallpaper oogt het best als hij voor de vorm van zijn scherm is gemaakt, niet uit een andere is gesneden. De meeste desktopschermen zijn 16:9 of iets daarbij in de buurt. Laptops zijn vaak iets hoger, rond 16:10. Telefoons zijn veel hoger dan 16:9: veel zitten rond 9:19,5. Ontwerp elke vorm apart en laat het licht voor elke vorm op de juiste plek vallen.
Desktop 16:9
1920 × 1080
Laptop 16:10
1600 × 1000
Hoge telefoon, circa 9:19,5
900 × 1950
Met twee of meer monitoren kun je één afbeelding per scherm instellen, of één brede afbeelding maken op de gezamenlijke breedte van beide. Met de tweede optie stroomt één kleurverloop over je hele bureau, maar de naad tussen de schermen snijdt erdoorheen, dus houd het licht weg van die rand.
Telefoons voegen twee complicaties toe: de klok en widgets van het vergrendelscherm staan over het bovenste derde, en sommige telefoons verschuiven de wallpaper een beetje als je kantelt, waardoor de randen worden afgesneden. Formaat van telefoonwallpapers behandelt beide in detail.
Een gradient wallpaper glad houden
Wallpapers worden groot getoond, vaak op heldere schermen van hoge kwaliteit, en dat maakt ze de zwaarste test voor een kleurverloop. De twee problemen die je ziet zijn banding, waarbij een glad verloop in zichtbare stappen breekt, en een modderig midden, waar twee sterke kleuren elkaar in grijs ontmoeten.
Geeft strepen en modder
- Donkere kleuren dicht bij elkaar over een groot vlak
- Zware JPEG-compressie
- Complementaire kleuren gemengd in sRGB
- Een volkomen glad verloop zonder ruis
Houdt het glad
- Genoeg kleurbereik over het verloop
- PNG of export van hoge kwaliteit
- Mengen in OKLCH, of een kleur in het midden
- Fijne korrel over het hele beeld
De uitgebreidere uitleg staat in banding in kleurverlopen en modderige kleurverlopen. Voor wallpapers is korrel de eenvoudigste oplossing: het breekt de stappen, zodat het oog één doorlopend verloop ziet, en het laat vlakke digitale kleur als film aanvoelen.
Donkere of lichte gradient wallpapers
Donkere wallpapers zijn ’s avonds rustiger voor de ogen en laten kleurrijke iconen opvallen. Ze vertonen ook makkelijker banding, dus korrel is er belangrijker. Lichte wallpapers voelen luchtig, maar kunnen witte tekst op widgets moeilijk leesbaar maken. Schakelt je telefoon tussen een lichte en een donkere weergave, overweeg dan een paar: dezelfde tinten, één versie opgelicht en één verdiept.
GR·N10S·5T
Cameo Bolero
Bekijk deze MarkIn Gradiently kun je met elke Mark ontwerpen op eigen formaten tot 8.000 pixels aan de lange zijde, dus één look kan een wallpaper voor desktop, laptop en telefoon worden. Marks exporteren ook als loopende video’s van 5 tot 30 seconden, als je een live wallpaper wilt.
Vragen die mensen stellen
Welk formaat moet een gradient wallpaper hebben?
De exacte resolutie van je scherm, of groter in dezelfde vorm. Desktops zijn meestal 16:9 of 16:10. Telefoons zijn hoger, vaak rond 9:19,5, dus controleer je model.
Waarom heeft mijn gradient wallpaper strepen?
Dat is banding: het scherm toont een glad verloop in zichtbare stappen. Exporteer als PNG, vermijd zware compressie en voeg fijne korrel toe om het te verbergen.
Hoe maak ik een regenboog wallpaper die niet goedkoop oogt?
Gebruik een deel van het spectrum in plaats van alles, houd de kleuren op vergelijkbare helderheid en meng in OKLCH, zodat de kleuren tussen de stops levendig blijven.
Zijn donkere wallpapers beter voor een telefoon?
Ze zijn prettiger om naar te kijken bij weinig licht en laten iconen opvallen. Op telefoons met een OLED-scherm kunnen donkere wallpapers ook iets minder stroom gebruiken, maar kies degene waar je graag naar kijkt.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
