Free Grainy Gradient Wallpapers (4K + iPhone) and Grainy Gradient CSS

Desktop 4K (3840 × 2160)

Click to open the full-size JPG, then save it.

Dusk grainy gradient desktop wallpaper, deep blue to violet — Dusk Download

Aurora grainy gradient desktop wallpaper, teal and green — Aurora Download

Peach grainy gradient desktop wallpaper, warm orange and pink — Peach Download

iPhone / phone (1290 × 2796)

This is the native size for iPhone 14 Pro Max, 15 Pro Max and 15 Plus, and it scales down cleanly on other phones.

Lavender grainy gradient iPhone wallpaper — Lavender Download

Sunset grainy gradient iPhone wallpaper, orange to pink — Sunset Download

Mint grainy gradient iPhone wallpaper — Mint Download

License for these 6 files

Use them for anything, personal or commercial: wallpapers, website heroes, slides, client work, apps or products you sell. No attribution needed. The one restriction is that you can't re-share or sell the files themselves as wallpapers or stock.

Grainy gradient background in CSS (no image files)

Layer an SVG noise texture over a few radial gradients, and blend the noise with overlay. The header of this page is built this way:

.grainy {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(at 15% 20%, #ff8a5c 0, transparent 55%),
    radial-gradient(at 85% 30%, #7a5cff 0, transparent 55%),
    radial-gradient(at 50% 95%, #ff5ca8 0, transparent 60%),
    #3b2a6b;
  background-blend-mode: overlay, normal, normal, normal, normal;
}

Tuning:

Grain strength: change opacity='.35' in the SVG (0.15 is subtle, 0.5 is heavy).
Grain size: baseFrequency sets it. Higher is finer: 0.6 is coarse, 1.2 is very fine.
Colours: move the at x% y% points and swap the hex values. Three or four blobs on a dark base colour look best.
Performance: the SVG is generated once and tiled, so it's cheap. For a very large full-screen animated background, a pre-rendered PNG grain overlay is lighter on the GPU than a live SVG filter.

Adding grain in Figma, Canva or Photoshop

Put a transparent grain PNG on top of any gradient (free seamless grain texture PNG, white and black, with a live preview). Set the blend mode to Overlay or Soft light and the opacity to 20–50%. Figma has a built-in Noise effect (Effects → Noise). In Canva and Photoshop, a PNG overlay is the simplest route.

Want more than 6?

These six come from MESHGRAIN: 100 grainy mesh gradients in 20 colour families (60 desktop 4K plus 40 phone wallpapers), with 8 transparent grain overlays (2K–4K PNG, tileable) and the same commercial license, for $6. If you only need the textures, the overlays are also sold alone for $3.

MESHGRAIN, 100 backgrounds, $6 Grain overlays only, $3

The gradients are generated procedurally by a custom renderer (mesh blending plus film grain). They aren't AI image-model output and don't use stock photos.

Also free: seamless noise texture PNGs (transparent soft + fine grain). Other free tools: ogkit (social card / OG image maker), AppShot (App Store screenshot maker), Favikit (favicon generator).