# SaaS landing page background: gradients that sell

[Canonical HTML page](https://gradiently.design/guide/saas-landing-page-background)

A ground that belongs to the product, with the headline on a calm patch of colour, is what makes a SaaS first screen feel like a brand worth trying.

## The short version

- A SaaS landing page background is the ground behind the first screen, and it should make the product look like one brand while the headline stays readable.
- Design the master at 1920 by 1080 with the headline on the calmest part of the colour, then crop that same idea for a tablet and a phone.
- Ship a CSS gradient when colour is enough, an exported image for a material CSS cannot draw, and a short seamless loop only when motion is part of the brand.
- Check contrast at the worst point under the letters, at least 4.5:1 for body text and 3:1 for large text, and check it again on the phone crop.
- Keep the product screenshot in front of the ground, with space around it, and reuse the same ground on the link preview.

A **SaaS landing page background** should make the first screen look like this product and keep the offer readable enough to act on. Design one ground at 1920 by 1080, put the headline on its calmest colour, and carry that same idea to tablet and phone. That is how the background earns the click: a recognisable product, and an offer people can read.

This guide is the ground only. The order of the rest of the page lives in [landing page design](https://gradiently.design/guide/landing-page-design), and the headline, supporting line and button live in [hero section design](https://gradiently.design/guide/hero-section-design).

## What the background has to do

Three jobs, in order. The ground should be recognisable as this product. The headline, the supporting line and the button need a calm place on it. Both still have to be true on a phone, which is the first screen many people see. Put the screenshot in front of the colour, with a margin, so the headline is not sitting on buttons and charts.

## Design the master at 1920 by 1080

Build the master at 1920 by 1080. Put the headline on the left or along the lower edge, and keep the busier colour where there is no type. Judge contrast at the worst point the letters cover, not the average of the frame.

[WebAIM's contrast checker](https://webaim.org/resources/contrastchecker/) measures two flat colours. WCAG 2.0 AA asks for at least 4.5:1 for normal text and 3:1 for large text: 18 point (typically 24px) or larger, or 14 point and bold (typically 18.66px) or larger. A hero headline is usually large text. The supporting line and the button label often are not. WCAG 2.1 also asks for 3:1 between a button and the colour beside it. On a blend, test the worst stop under each line. The method is in [text on a gradient](https://gradiently.design/guide/text-on-gradient).

A 1920 by 1080 SaaS hero for the fictional product Northline, with legibility off so one text colour runs across a changing gradient

Example hero for a fictional planning product. Legibility off: one ink colour, and the material runs straight through the words.

The same 1920 by 1080 Northline hero with legibility on, so a calmer region sits behind the headline and each line uses readable ink

The same frame with legibility on: the calmest region moves behind the headline, and each line takes the ink that reads.

> **Leave the type on the ground** A panel, blur or shadow behind the headline means the ground and the type were designed apart. Move the words, or quiet the colour behind them.

If you build the frame in Gradiently, the Mark moves its calmest region behind the words, and Auto ink picks a light or dark line from the Mark's own palette. You set how strong that is. [Auto ink](https://gradiently.design/guide/auto-ink-legibility) is that choice.

## Four colour directions that stay readable

Four directions cover most readable heroes: a paper field, a night field, one accent kept off the small type, or a horizon where body text avoids the middle. Copy one, then shift the hues towards your brand. The label says where the headline may sit.

- Paper: dark type on a pale field: `linear-gradient(180deg, #f4f7fb 0%, #d5e2ee 100%)`
- Night: light type on a deep field: `linear-gradient(165deg, #071421 0%, #123044 52%, #071421 100%)`
- One accent: keep words on the deep end: `linear-gradient(120deg, #071421 0%, #0e7490 38%, #d7f3ee 100%)`
- Horizon: avoid the middle band: `linear-gradient(180deg, #e7f0f6 0%, #5c7e96 48%, #10283a 100%)`

Four directions in one blue family. The label is where the headline may sit.

Using that same WCAG measure on these stops: pale #f4f7fb on the night ground #071421 is 17.3:1, and deep #071421 on the darker paper end #d5e2ee is 14.1:1. The dusty horizon stop #5c7e96 misses for small type. Pale ink there is 4.0:1 and deep ink is 4.3:1, both short of 4.5:1, though both clear 3:1, so a large headline can survive it. The teal accent #0e7490 passes for pale body text at 5.0:1 and fails for deep body text at 3.5:1. Keep small print off the teal and off that dusty band.

On the night ground, a button filled with #e7f0f6 and labelled in #071421 is 16.1:1 against #071421, for the word and for the edge. On the paper field, flip it: deep label, pale page.

## CSS for the hero

Set a solid fallback colour, then the gradient. Size the hero with `svh`, the small viewport: the height when the browser's bars are expanded. `100svh` is not covered by those bars, and it does not jump as they hide. `vh` matches the large viewport and can slip under them. The units are in the [CSS length reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length).

```css
.hero {
  min-height: min(100svh, 920px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(4.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3rem, 8vh, 5rem);
  color: #f4f7fb;
  background-color: #071421;
  background-image: linear-gradient(165deg, #071421 0%, #123044 52%, #071421 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.hero .copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  text-wrap: balance;
}

.hero .shot {
  width: min(46%, 640px);
  height: auto;
  border-radius: 12px;
}

.hero.has-image {
  background-image: url("/hero-1920.webp");
}

@media (max-width: 720px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 100svh;
    background-position: center bottom;
  }

  .hero .shot {
    width: 100%;
  }
}
```

A night hero: fallback colour, then the gradient. Words and screenshot sit side by side, then stack under 720px. Add has-image when the ground is a file.

The markup is a `section.hero`, a group for the words, and an `img.shot`. The shot is in the page, not in the background. `min-height` lets the section grow instead of clipping, and the 920px cap stops a large monitor from turning the hero into an empty field.

This night gradient stays calm when the two parts stack. A directional ground must be re-aimed there, because the words move from the left to the bottom. For a file, `cover` crops. `background-position: center bottom` keeps the lower area, where the phone headline now sits. If the calm patch is elsewhere, change the position or export a taller crop. File weight is in [website hero backgrounds](https://gradiently.design/guide/website-hero-background). Why a CSS ground stays light is in [CSS gradient performance](https://gradiently.design/guide/css-gradient-performance).

## Desktop, tablet and phone

The master is 16:9. A tablet window is often nearer 4:3, and a phone hero is tall. A CSS gradient reflows. An image does not, so choose the region that must survive. The headline, the button and one line of support should show without scrolling on a phone. If they do not fit, cut words before you thin the type. Browser bars and a site header steal height: if the button drops below the fold, move the screenshot under it.

- Desktop 16:9: 1920 × 1080
- Tablet 4:3: 1600 × 1200
- Phone, tall: 1080 × 1920

Three shapes of one hero. Keep the calm patch inside the crop, or a tall frame will slice it off.

## Ship a still, or a seamless loop

Ship a still unless motion is part of the product. A short seamless loop can sit behind the same headline if it is muted, has a poster that already looks finished, and stops when someone asks for less motion. The rules are in [video backgrounds on websites](https://gradiently.design/guide/video-background-website).

Design the frame on a Mark in Gradiently, then export a still, or a short seamless loop when motion is the brand. See that ground as a website hero in [Explore](/explore) before you build, and preview your name on a hero and a phone site at [Try on your brand](/try), with no account. Claim the Mark and only your team can keep designing and exporting with it. Reuse the ground at 1200 by 630 on the [Open Graph image](https://gradiently.design/guide/open-graph-image-size).

## What to keep and what to drop

### Avoid

- A violet or rainbow wash that could belong to any product
- The screenshot as the background, with type on the interface
- A full-frame dark film added only to rescue the headline
- Stock photos of laptops, handshakes or glass buildings
- A loop with no still poster and no reduced-motion fallback

### Do

- One ground in this product's colours, reused on the link preview
- Headline, support line and button on the calmest region
- The screenshot in front, with margin, so type never sits on the UI
- A still that looks finished before any motion loads
- Contrast checked at the worst point under the letters, on the phone too

## FAQ

### What size should a SaaS landing page background be?

Design the master at 1920 by 1080. Use a frame near 4:3 on a tablet, such as 1600 by 1200, and a tall frame such as 1080 by 1920 on a phone. Keep the calm area behind the headline in each crop.

### Should the background be CSS, an image or a video?

Use CSS when the look is colour: it adds almost nothing to download and stays sharp. Use an exported image for a material CSS cannot draw. Use a short seamless loop only when motion is part of the brand, with a finished still behind it.

### How do I keep the headline readable on the gradient?

Place the words on a clearly light or clearly dark stop, and test the worst point under the letters. Body text needs 4.5:1. Large text needs 3:1. Move the line, or quiet the colour, instead of putting a panel behind it.

### Will one background work on desktop and on a phone?

A percentage gradient reflows. An image needs background-position, or a taller export, so the calm patch stays under the words. On a phone those words often sit at the bottom, not on the left.

### Should the product screenshot be the background?

No. Keep the screenshot in front, with space around it, so the headline sits on the brand colour rather than on the interface.