SaaS landing page background: gradients that sell

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, and the headline, supporting line and button live in 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 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.

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 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.

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.

.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%;
  }
}

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. Why a CSS ground stays light is in 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.

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.

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 before you build, and preview your name on a hero and a phone site at Try on your brand, 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.

What to keep and what to drop