# Gradient wallpaper for desktop and phone: codes and how to make one [Canonical HTML page](https://gradiently.design/guide/gradient-wallpaper) A gradient is the ideal wallpaper: no details to fight your icons, nothing to tire of, and colour that changes the feel of a whole screen. Here is how to make one that stays smooth at full size. ## The short version - A gradient wallpaper is a smooth blend of colours used as a desktop or phone background, chosen because it stays calm behind icons, widgets and windows. - Make desktop wallpapers at your screen's exact resolution in its own shape, usually 16:9, and phone wallpapers tall, with extra height above 9:16. - Large, smooth gradients are where banding shows most, so add fine grain and export as PNG rather than a compressed JPEG. - Place the lightest or busiest part of the gradient away from where icons, the clock and widgets sit. - Blending colours in OKLCH keeps rainbow and complementary gradients vivid instead of turning grey in the middle. A **gradient wallpaper** is a smooth blend of colours used as the background of a desktop or phone. It works because it has no details to compete with icons, widgets and windows, and it changes the whole mood of a screen with colour alone. To make a good one: choose a family of three to five colours, blend them softly with the light where you want the eye to rest, export at your screen's exact size and shape, and add fine grain so the blend stays smooth instead of showing stripes. Below you will find ready-made gradients to copy, the method for making your own, and how to fit each to a screen. For more colour combinations, see [gradient colour combinations](https://gradiently.design/guide/gradient-color-combinations). ## Gradient wallpaper ideas with codes Each of these is a single CSS gradient, so you can preview it in a browser, adapt the colours and export it at any size. They are grouped loosely from bright to dark. - Coral bloom: `linear-gradient(135deg, #ff9a8b 0%, #ff6a88 45%, #ff99ac 100%)` - Morning sky: `linear-gradient(160deg, #a1c4fd 0%, #c2e9fb 100%)` - Candy haze: `linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)` - Apricot sun: `linear-gradient(120deg, #f6d365 0%, #fda085 100%)` - Pastel spectrum: `linear-gradient(120deg, #ffb3b3 0%, #ffe0a3 25%, #b8f2e6 50%, #b9c6ff 75%, #e3b8ff 100%)` - Prism swirl: `conic-gradient(from 210deg at 70% 30%, #ff7eb3, #ffb86b, #fff27a, #7affc4, #6bc7ff, #b58cff, #ff7eb3)` - Deep lagoon: `linear-gradient(160deg, #134e5e 0%, #2f8f83 50%, #71b280 100%)` - Violet night: `radial-gradient(ellipse at 30% 20%, #5b3cc4 0%, #2a1b6b 45%, #0e0a24 100%)` - Ember dusk: `radial-gradient(ellipse at 70% 80%, #ff6a3d 0%, #8a1f5c 45%, #1a0b24 100%)` - Midnight steel: `linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%)` Ten gradient wallpapers from bright to dark. The two spectrum gradients keep their colours at similar lightness, so they read as one soft light rather than stripes. ## How to make a gradient wallpaper 1. **Find your screen's size** Check your display settings for the resolution, and your phone's specifications for its screen size. Design at that exact size, or larger in the same shape. 2. **Pick a colour family** Three to five colours with a clear relationship: neighbouring hues for calm, a warm and cool pair for energy. [Analogous colours](https://gradiently.design/guide/analogous-colors) are the easiest route. 3. **Place the light** Decide where the brightest area goes. On a desktop, away from icons; on a phone, usually behind the clock or lower centre. 4. **Blend smoothly** Spread the stops out, and blend in OKLCH if colours are far apart on the wheel, so the middle doesn't turn grey. 5. **Add grain** A fine noise layer at low strength. It hides banding and makes the colour feel richer. 6. **Export as PNG** Lossless export keeps the blend smooth. A heavily compressed JPEG is the most common cause of stripes. If you want to build one in the browser, set a gradient on a full-screen page and blend it in OKLCH. Modern browsers support [colour interpolation in gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), which keeps vivid colours vivid through the middle of the blend. ```html ``` A full-screen gradient preview blended in OKLCH, with a soft radial glow layered on top. Open it in a browser, adjust the numbers, then recreate or capture it at your screen's size. ## Desktop and phone wallpaper shapes A wallpaper looks best when it is made for its screen's shape, not cropped from another. Most desktop displays are 16:9 or close to it; laptops are often a little taller, around 16:10. Phones are much taller than 16:9: many are around 9:19.5. Design each shape separately and let the light fall in the right place for each. - Desktop 16:9: 1920 × 1080 - Laptop 16:10: 1600 × 1000 - Tall phone, about 9:19.5: 900 × 1950 The three shapes to plan for. Exact pixels vary by model, so check yours before you export. With two or more monitors, you can either set one image per screen or make one wide image at the combined width of both. The second option lets a single gradient flow across the desk, but the join between screens will cut through it, so keep the light away from that edge. Phones add two complications: the lock screen clock and widgets sit over the top third, and some phones move the wallpaper slightly as you tilt, which crops the edges. [Phone wallpaper size](https://gradiently.design/guide/phone-wallpaper-size) covers both in detail. ## Keeping gradient wallpapers smooth Wallpapers are shown large, often on bright, high-quality screens, which makes them the harshest test of a gradient. The two problems you will see are banding, where a smooth blend breaks into visible steps, and muddy middles, where two strong colours meet in grey. ### Causes stripes and mud - Close, dark colours over a large area - Heavy JPEG compression - Complementary colours blended in sRGB - A perfectly smooth blend with no noise ### Keeps it smooth - Enough colour range across the blend - PNG or high-quality export - OKLCH blending, or a midpoint colour - Fine grain over the whole image The deeper explanations live in [gradient banding](https://gradiently.design/guide/gradient-banding) and [muddy gradients](https://gradiently.design/guide/muddy-gradients). For wallpapers, grain is the simplest fix: it breaks the steps up so the eye sees one continuous blend, and it makes flat digital colour feel like film. ## Dark or light gradient wallpapers Dark wallpapers are easier on the eyes at night and make colourful icons stand out; they also band more easily, so grain matters more. Light wallpapers feel airy but can make white text on widgets hard to read. If your phone switches between light and dark appearance, consider a pair: the same hues, one version lifted and one deepened. A Mark shown on its own: a living gradient with colour, material, light and grain that can be rendered at any screen size. In Gradiently, you can design with any Mark at custom sizes up to 8,000 pixels on the long side, so one look can become a desktop, laptop and phone wallpaper. Marks also export as 5 to 30 second looping videos if you want a [live wallpaper](https://gradiently.design/guide/live-wallpaper). ## FAQ ### What size should a gradient wallpaper be? Your screen's exact resolution, or larger in the same shape. Desktops are usually 16:9 or 16:10; phones are taller, often around 9:19.5, so check your model. ### Why does my gradient wallpaper have stripes? That is banding: the screen shows a smooth blend in visible steps. Export as PNG, avoid heavy compression, and add fine grain to hide it. ### How do I make a rainbow gradient wallpaper that doesn't look cheap? Use part of the spectrum rather than all of it, keep the colours at similar lightness, and blend in OKLCH so the colours stay vivid between stops. ### Are dark wallpapers better for a phone? They are easier to look at in dim light and make icons stand out. On phones with OLED screens, dark wallpapers can also use a little less power, but choose the one you like looking at.