Gradient Wallpaper Generator
Ambient, three-colour gradients with a heavy blur are the background style of every SaaS landing page and most desktop wallpapers released in the last four years. This tool mixes three hex colours with an adjustable angle and a Gaussian blur, and exports the result at desktop, phone or Zoom-backdrop resolution.
How to build a gradient wallpaper
-
1
Pick three colours
Tweak hex values directly or hit Randomise for a surprise palette.
-
2
Set the angle
0–360°. 135° is the "sunset" diagonal; 90° is the "sunrise" sideways blend.
-
3
Adjust the blur
Higher blur hides the boundaries between colours and smooths the whole canvas.
-
4
Export the image
Download at the resolution that matches your display or phone.
Recommended output sizes
| Target | Resolution |
|---|---|
| 4K desktop | 3840 × 2160 |
| 1440p desktop | 2560 × 1440 |
| 1080p desktop | 1920 × 1080 |
| iPhone 15/16 | 1179 × 2556 |
| Android (modern) | 1080 × 2400 |
| Zoom virtual background | 1920 × 1080 |
Palette hints that always work
- Complementary pair + neutral: blue, orange, beige.
- Analogous trio: pick three hues within 60° on the colour wheel, purple, magenta, pink.
- Warm-cool tension: one warm (peach, red), one cool (teal, navy), one neutral (cream).
- Monochrome: one hue in three values creates a subtle, mood-consistent wall.
Why the blur matters
A three-stop gradient without blur shows sharp boundaries at the colour stops (the “rainbow effect”). A filter: blur() of 60–100 px on a large canvas smooths the transitions into washes reminiscent of macOS Big Sur or iOS 16 wallpapers.
Live CSS preview
background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);
If you prefer a crisp gradient without blur, lower the filter to 0 and consider switching to in oklch interpolation for perceptually even blending.
Frequently Asked Questions
A blur filter samples pixels outside the canvas and those are transparent. For a wallpaper, generate at a larger size, blur, then crop to the final resolution, the edges stay clean.
This generator uses three. More colours tend to feel like a screensaver; three is the sweet spot for a calm wallpaper.
Not exactly. Phone ratios are taller than desktop, so the diagonal angle reads differently. Preview at each target size and tweak the angle if one looks off.
No. The canvas is drawn locally and only the download you trigger leaves the browser.
Related Tools
HEX Color Picker
Pick any colour visually and get its HEX, RGB, HSL, HSV and CMYK values, plus accessibility contrast against white and black.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
BBCode to HTML Converter
Convert BBCode (bulletin-board markup) to clean HTML. Handles formatting tags, lists, quotes, code, images, links and tables.
JSON Formatter
Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.
Random Color Palette Generator
Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.