Gradient Background Generator
Make gradient backgrounds for websites, launch posts, decks and app screens. Three styles, real grain, pixel and dither finishes, exported at 4K with no watermark and ready to drop into Figma.
5 free 4K exports a month · no watermark · no card
Backgrounds to start from
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.
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.
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 pre-set to this look. Shuffle until something feels right, then export.
Make a background