Free Gradient Wallpaper Generator
Create and download custom gradient wallpapers.
About Gradients
CSS gradients let you create smooth color transitions without images, reducing file size and improving performance. This tool generates both PNG files for use as wallpapers and CSS code you can use on websites.
Frequently Asked Questions
What's the difference between linear, radial, and conic gradients?
Linear gradients flow in a straight line at a specified angle. Radial gradients flow outward from a center point. Conic gradients flow around a center point like a color wheel. Each creates a different visual effect.
Can I use CSS gradients on my website?
Yes! CSS gradients are supported in all modern browsers and don't require image files. They scale infinitely, load faster, and look crisp on any screen. Copy the CSS generated by this tool into your stylesheets.
What are the best resolutions for my device?
Desktop monitors typically use 1920x1080, laptops vary, 4K monitors use 3840x2160, iPhones use 1080x1920, and iPads use 2048x2732. Choose the resolution that matches your device for the sharpest wallpaper.
Gradients on the web, a short history
Gradients have a long pre-digital history in print and airbrush. The vocabulary of "gradient" as a smooth ramp from one colour to another comes directly from chromolithography and airbrush poster art of the late nineteenth century; Bauhaus design students drilled tonal-ramp exercises in the 1920s long before any pixel pushed one to a screen.
Digital gradients arrived in two adjacent moments at the start of the 1990s. Adobe Photoshop 1.0 (February 1990) shipped a gradient tool from day one, a "blend" algorithm interpolating between foreground and background swatches with linear and radial fall-off. Adobe PostScript Level 2 (1991) introduced shading patterns as a first-class language feature; until then, PostScript Level 1 had no way to describe a gradient natively and it had to be faked with banded fills of incremental greys. PostScript Level 3 (1997) added the Type 6 (Coons patch) and Type 7 (tensor-product) mesh shadings that powered every printed gradient in the late-1990s magazine industry. Adobe Illustrator's mesh-gradient tool followed in version 8 (1998).
CSS gradients on the web arrived later than people remember. WebKit's -webkit-gradient() shipped in Safari 4 and Chrome 1 in 2008 with a verbose syntax of its own. Mozilla's -moz-linear-gradient() followed in Firefox 3.6 (January 2010), using the syntax that would eventually become standard. The unprefixed linear-gradient() and radial-gradient() reached W3C Candidate Recommendation in April 2012 and were widely usable from around 2013. conic-gradient() is much newer, Chrome 69 in September 2018 (behind a flag), unflagged in Chrome 75 (June 2019), Firefox 83 (November 2020). It's now Baseline-available across every modern browser.
Skeuomorphic, then flat, then gradient again
Gradients became the visual language of late-1990s and early-2000s web design, the glassy, beveled, reflective Web 2.0 buttons of the Apple Aqua interface (2000) were essentially nested gradients with a sharp inner highlight on top of a soft body fade. The flat-design movement crystallised around Microsoft's Metro (Windows Phone 7, 2010) and Apple's iOS 7 (2013), reacting against gradient-heavy skeuomorphism by stripping every shadow, bevel and blend out of the UI. For roughly five years (2013–2018), gradients were unfashionable.
The pendulum swung back hard from 2017 onwards. Stripe's animated multi-colour mesh gradient on its homepage set a template the entire SaaS industry copied. Instagram's 2016 logo rebrand replaced a flat camera with a saturated pink-orange-purple gradient (a deliberate echo of 1980s photography logos). By the end of the decade, gradients were ubiquitous again, but with a new vocabulary: meshes, blurred blobs, OKLCH-smooth, accessibility-aware. Tailwind CSS 4 (January 2025) shipped a curated set of default gradient utilities including conic gradients with hue-interpolation hints.
CSS gradient syntax in one screen
All three CSS gradient functions take a list of colour stops and a direction:
linear-gradient(angle, colors…): angle in CSS uses compass-bearing convention:0degpoints up (first colour at the bottom),90degpoints right,180degpoints down (the default),270degpoints left. Note this is the opposite of mathematical polar angle. You can also use keywords:to top rightcomputes the angle so the gradient line passes through the diagonal, not the same as a 135° gradient on a non-square box.radial-gradient(shape size at position, colors…): colours sweep outward from a centre point.circleorellipse; size keywordsclosest-side,farthest-corner; position defaults to centre.conic-gradient(from angle at position, colors…): colours rotate clockwise around a centre, like a colour wheel. Useful for pie charts, sweep effects, and that "donut chart" look. Repeating variants of all three (repeating-linear-gradient, etc.) tile the colour stops infinitely.
Hard stops (placing two colour stops at the same percentage) create sharp bands rather than smooth blends: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) is a two-colour split, not a gradient. Useful for stripes, cards with section colour, or pseudo-borders.
The OKLCH revolution, and the muddy-grey midpoint
A gradient from pure red #ff0000 to pure green #00ff00 in default sRGB interpolation passes through a desaturated, muddy yellow-brown around #7f7f00. This happens because sRGB linear interpolation reduces both R and G channels at the midpoint, and our eyes perceive the midpoint as much darker and less saturated than either endpoint. The classic web-design pain point.
CSS Color Module Level 4 added perceptually-uniform colour spaces and the ability to interpolate gradients in them: linear-gradient(in oklch, red, green). OKLCH (and its sibling OKLab), designed by Björn Ottosson in December 2020, separates lightness, chroma and hue so that interpolating along the hue axis takes the short way around the colour wheel, preserving saturation throughout. The same red-to-green gradient in OKLCH passes through a vivid yellow at the midpoint.
The general rule:
- Two analogous hues (red to orange, blue to purple), sRGB and OKLCH look similar; usually fine.
- Two complementary hues (red to green, blue to orange)) sRGB produces muddy grey, OKLCH produces a vivid hue sweep. OKLCH wins decisively.
- One colour to white or black: sRGB looks dingy at the midpoint; OKLCH keeps perceived lightness changing smoothly.
- Two desaturated colours of similar lightness: minimal difference.
Browser support: interpolation-method for gradients shipped in Safari 16.2 (December 2022), Chrome 111 (March 2023), and Firefox 113 (May 2023), now Baseline Widely Available.
Resolution presets) pick the right pixel count
A wallpaper that's smaller than the screen gets stretched and looks soft; one that's much larger wastes file size and memory. Common targets in 2026:
| Resolution | Common name | Where |
|---|---|---|
| 1920×1080 | Full HD / 1080p | Most common laptop and desktop in 2026 |
| 2560×1440 | QHD / 2K | Mainstream gaming and creator monitors |
| 3440×1440 | UWQHD ultrawide | Curved 21:9 ultrawide monitors |
| 3840×2160 | 4K / UHD | High-end desktops and Apple Studio Display |
| 5120×2880 | 5K | Apple iMac Retina, Studio Display |
| 1080×1920 | Phone portrait | Generic FHD Android baseline |
| 1170×2532 / 1290×2796 | Modern iPhone | iPhone 13–16 family at 19.5:9 |
| 2048×2732 | iPad Pro 12.9" | 4:3 tablets |
When you'd reach for this
- Personal device wallpapers: desktop, lock screen, home screen, even smartwatch face background.
- Video conferencing virtual backgrounds. Solid gradients are easier on Zoom/Teams/Meet auto-segmentation than busy photos, they reduce the "halo" artefact around the speaker.
- Social media headers: Twitter/X 1500×500, LinkedIn 1584×396, YouTube channel banner 2560×1440 (with safe-area considerations), Instagram Stories 1080×1920.
- Brand identity gradients. Stripe's purple-blue mesh, Instagram's pink-orange-purple, Spotify's lime-to-dark green, Slack's purple-pink, all real-world examples of brand-defining gradients.
- Hero sections on web pages) even though CSS gradients are usually applied directly via
background-image, a PNG fallback is useful for emails (most email clients still don't render CSS gradients reliably) and for browsers withoutoklchinterpolation. - Empty states, loading skeletons, dashboard cards: UI surfaces that benefit from gentle visual interest without being distracting.
- Print and merch. A 4K wallpaper at 300 DPI roughly covers a 12 × 18 inch poster.
Accessibility, text over gradients
The most common practical mistake with gradient backgrounds is failing contrast for any overlaid text. WCAG 2.2 SC 1.4.3 (Contrast Minimum, Level AA) requires 4.5:1 for body text and 3:1 for large text (18 pt regular or 14 pt bold). WCAG was written for solid backgrounds; with a gradient, the contrast ratio at every point under the text matters, the worst point is what counts.
Practical fixes when you put text over a gradient: add a semi-transparent black or white scrim under the text, constrain the gradient under the text to a narrow lightness range, or use a strong text-shadow as a fallback. Vertical gradients (top-dark, bottom-light) are generally more text-friendly than diagonal, text that flows left-to-right encounters constant background lightness on each line; a 45° gradient under a long text block forces every line to traverse the lightness range, making consistent contrast much harder.
More questions
Why does my gradient have visible bands?
Two usual causes. First, JPEG compression, JPEG's DCT-based encoding produces visible "blocking" on smooth tonal ramps, especially in low-saturation regions. Save as PNG or WebP-lossless instead. Second, 8-bit-per-channel colour depth: an 8-bit gradient between two close colours has only a few distinct tonal steps and the eye can sometimes resolve them. Adding a subtle noise/dither overlay (1–2% noise) breaks up the bands by adding natural variation; many high-end design tools do this automatically.
Should I use linear, radial, or conic for a desktop wallpaper?
For most wallpapers, linear at a slight diagonal (around 135°) or a radial centred off-screen looks best, they create asymmetry without being distracting. Conic gradients are striking but read as "designed-by-a-designer" rather than ambient backdrop, so they're better for accent surfaces (album art, social posts) than for wallpapers you'll stare at for eight hours a day. Mesh gradients (multiple overlapping radial gradients) are the most modern look but require either a JS library or a generated image, a single radial gradient with two complementary hues at low saturation is a good approximation.
What colour combinations look best?
Three reliable patterns: analogous (two colours adjacent on the wheel (purple to blue, orange to red) reads as calm and harmonious; monochromatic (same hue, varying lightness) the classic Stripe blue) reads as branded and subtle; triadic-plus-OKLCH (three or four equally-spaced colours interpolated in a perceptual space) gives the modern Stripe / Instagram look. Avoid two pure complementary colours (red/green, blue/orange) unless you're explicitly using oklch() interpolation, sRGB will give you a muddy midpoint.
Does anything get sent to a server?
No. The gradient is rendered to a <canvas> in your browser, the PNG is exported via canvas.toDataURL(), and the CSS string is generated by JavaScript locally. Nothing about your colour choices, dimensions or the resulting image leaves the page.