Gradients Studio

Website hero backgrounds

Hero backgrounds for landing pages, at 16:9 for desktop, with the slice a phone keeps marked so the interesting part survives object-fit: cover.

Make a hero backgroundEvery size

1920 × 1080 · First download free, no account · No watermark

1920 × 1080

A full-width 16:9 hero on a 1080p screen. The studio's 16:9 frame is the same shape.

Ember website hero background with its safe zones marked
  • Phone crop

A full-bleed hero is cropped to the screen. On a phone, object-fit: cover keeps only a tall slice of the middle, so put the colour's centre of gravity there.

website hero: 1920 × 1080 pixels.

Studio frame
16:9
First download
1920 × 1080
4K export
3840 × 2160

Six to start from

Rendered at 16:9 by the studio's own renderer. Each opens there at this size, ready to change and export.

Export a tall one for phones

Open the same design at 9:16 and export it too, then serve it with a media query or <picture>. Phones get a composition made for them instead of a crop.

Grain stops the banding

Large, dark, soft gradients are where 8-bit banding shows worst. The studio renders fine grain into the file, which breaks up the steps without looking like noise at arm's length.

Light enough to load

The first, account-free download is 1920 × 1080 and, grain and all, under a megabyte; enough for most sites. Save 4K for hero images that fill large screens edge to edge.

Other sizes

The same studio, set to another place a background goes.

Questions

What size should a hero background be?
1920 × 1080 covers most desktop screens; export 4K (3840 × 2160) if your hero fills large or high-density displays. Use object-fit: cover so it crops instead of stretching.
Can a coding agent add one to my site?
Yes. Gradients Studio's MCP server works in Cursor, Claude Code and Codex: ask for a hero background in your brand colours and it renders one and puts it in the repo.
Is it free to download?
Yes. The first download needs no account: 1920 × 1080 at 16:9. A free account exports 5 4K images a month, 3840 × 2160 at this ratio, with no watermark.
Can I use my own colours?
Yes. Every example opens in the studio at 16:9. Change the palette (paste your brand's hex codes), the style, the grain and the blur, then export.

Make a hero background now

The studio opens at 16:9, 1920 × 1080's shape. Shuffle until it feels right, then export.

Open the studio