Gradient Background Generator

Make gradient backgrounds for websites, launch posts, decks and app screens. Four styles, real grain, pixel and dither finishes, exported at 4K with no watermark and ready to drop into Figma.

Make a background Free wallpapers

5 free 4K exports a month · No watermark · No card

Backgrounds to start from

Each one opens in the studio with its exact settings, ready to change and export.

Want the finished image? Each is a free 4K wallpaper: Ember, Peach Fuzz, Lavender Haze, Deep Sea, Aurora, Silk Rose, Blue Sky and Midnight.

Backgrounds for product sites

The hero backgrounds on Linear, Vercel, Raycast and most AI product sites are gradients with grain, sometimes dithered, always dark and calm enough to hold a headline. Pick a palette, keep the blur high, add grain at 20 to 40 percent, and export at 16:9 or the 1.91:1 social card size.

Backgrounds for launch posts and decks

A launch post needs a backdrop that survives feed compression; a deck needs section breaks that do not look like a template. Export 4:5 for a LinkedIn portrait post, 1.91:1 for X and link previews, 16:9 for slides. The same scene re-exports at every size, so the set matches. For a post or slide that moves, turn the scene into an animated gradient background and export it as an MP4 loop.

Why these do not band

Smooth gradients show visible color steps on large monitors, especially in dark palettes. Here the grain is rendered into the image at export resolution, so the steps scatter into texture. It survives JPEG compression, scaling in Figma and print.

From the studio to Figma, Framer or code

Export the JPG and place it as an image fill in Figma or Framer, or as a background image on the web. Keep the studio link so you can reopen the exact gradient and re-export at another size later. A CSS gradient is fine for flat fades; for the grainy, dithered look you need an image.

Sized for where it goes

Exact sizes and safe zones for the places a background ends up, each with examples at that shape.

More generators

The same studio, set to another look.

Questions

What size should a website background be?

Export at 16:9, which is 3840 by 2160 pixels, and let the browser cover the hero. For a link preview or social card use 1.91:1. Both are 4K, so they stay sharp on retina screens.

Can I match my brand colors?

Yes. Set the background and up to eight accent colors by hex, or start from a palette inspired by a site you like and swap in your own. Save the palette to reuse across sizes.

Is it free for commercial work?

Yes. Every export on every plan is yours to use in client work and in products you sell, with no credit required. Free accounts get five 4K exports a month.

Do you make CSS gradients?

No. The studio makes images, because grain, pixel and dither cannot be expressed in CSS. For a plain two-color fade, a CSS gradient is the better tool.

Make one now

The studio opens set to this look. Shuffle until something feels right, then export.

Make a background