HTML & CSS

Create a Website Gradient Background That Fits the Page

Create a full-page gradient background that covers short and long pages, keeps content readable, and avoids fixed-height clipping and accidental repeated bands.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Give the page a surface that can grow with content

A website gradient background should cover the available viewport on a short page and continue behind the document when content becomes longer. Put the gradient on the element that owns the page surface and use a minimum height rather than a fixed height. A fixed one-screen box can leave later content outside the intended painted area.

The example below gives html a solid fallback and body the gradient. The content sits in a centered wrapper with a white reading panel. This keeps ordinary text independent from the decorative background and makes the gradient visible in the surrounding page margins.

Use a growing body and a bounded content wrapper

Place the markup inside a normal document body. The first minimum-height declaration supplies a conventional viewport fallback. The second uses the dynamic viewport height where supported. Content can still make the body taller than either minimum, so the page is not restricted to a single screen.

<main class="site-page">
  <article class="reading-panel">
    <h1>A useful page on a soft background</h1>
    <p>The content controls the document height.</p>
    <a href="#more">Continue reading</a>
  </article>
  <section class="reading-panel" id="more">
    <h2>More information</h2>
    <p>Additional content can extend the page naturally.</p>
  </section>
</main>

html { background: #f8fafc; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: #172554;
  background-color: #f8fafc;
  background-image: linear-gradient(160deg, #eff6ff, #fce7f3);
  background-repeat: no-repeat;
  font-family: system-ui, sans-serif;
}
.site-page {
  width: min(64rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: 2rem;
}
.reading-panel {
  margin-bottom: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: .75rem;
  background: #ffffff;
  overflow-wrap: anywhere;
}
.reading-panel a { color: #1d4ed8; }
.reading-panel a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

The gradient is painted across the body’s surface. As the document grows, the blend can spread over a taller area, so its visible rate of color change can differ between short and long pages. That is expected for this recipe. A design requiring a fixed-height decorative header should place its gradient on that header instead.

Choose the viewport behavior intentionally

Dynamic viewport units respond to the browser’s current viewport environment, which can change when mobile browser controls appear or disappear. The earlier vh declaration remains a fallback for an engine that does not understand dvh. MDN’s CSS length reference explains the viewport unit families.

Do not combine a fixed height: 100vh with overflow: hidden merely to remove a scrollbar in a screenshot. That can prevent readers from reaching longer content or enlarged text. Find the specific source of unintended horizontal overflow, while allowing normal vertical document scrolling.

Select a restrained page palette

Use the CSS Gradient Generator with Linear, angle 160, #eff6ff and #fce7f3 to reproduce the example palette. Copy the gradient image into the body rule. Compare a second endpoint such as #ccfbf1 if the page needs a cooler finish.

The tool previews one gradient box; it does not know your document height, header layout or content panels. A strong color transition that looks appealing in a small preview can become distracting across a long reading page. Review the palette in the actual layout before applying it to every route of a site.

Avoid accidental repetition and competing surfaces

If you see repeated color bands, inspect background-size and background-repeat. A small fixed background size combined with repeat can tile the same blend down the document. This example uses the natural box-filling gradient and explicitly disables repetition, rather than creating a short repeating strip.

Check whether another rule assigns a background to a full-width wrapper above the body. An opaque wrapper can hide the page gradient entirely. That may be intentional for a reading surface, but it should be distinguished from a gradient that failed to parse or a stylesheet that failed to load.

Test short, long and enlarged-content pages

Start with the two small panels, then add enough paragraphs to require scrolling. Verify that the body remains at least as tall as the viewport and grows with the content. Repeat at a narrow width and with larger text, checking that the page does not develop a horizontal scrollbar.

Use keyboard navigation to reach the link and confirm that its focus indicator remains visible against the white panel. If you later remove the panels and place text directly on the gradient, reevaluate contrast over the entire area behind the text. A full-page decorative background should support the content rather than determine whether it can be read.