CSS Gradient Background — Full Page, Body & Section Examples

Updated: May 2026

A CSS gradient background removes the need for any background image file while delivering smooth, scalable color transitions that look crisp on every screen density. From full-page body gradients to small card backdrops, the same CSS properties apply — the difference is which selector you target.

Generate your CSS gradient →

Free · No upload · In your browser

Full-page gradient on body

To cover the entire viewport, apply the gradient to html and body with min-height: 100%:

html, body {
  min-height: 100%;
}
body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  background-attachment: fixed; /* optional: keeps gradient fixed during scroll */
}

Full-page gradient

The background-attachment: fixed declaration pins the gradient to the viewport. As the user scrolls, the content moves but the gradient stays in place, creating a parallax-like depth effect at zero cost.

background-attachment: fixed can trigger repaints on scroll in some browsers and may harm performance on mobile. Test with and without it; for most landing pages the impact is negligible, but for long scroll pages it is safer to remove it.

Hero section gradient

A hero typically spans the full viewport height on the first screen:

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
}

Hero section

Multi-stop gradients with subtle angle shifts look richer than two-stop versions on large surfaces. Use three or more stops when the gradient covers more than half the viewport height.

Section and card gradients

Smaller surfaces benefit from softer transitions that do not compete with the content:

.card {
  background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.12));
  border: 1px solid rgba(102,126,234,0.2);
  border-radius: 12px;
  padding: 24px;
}
.section-alt {
  background: linear-gradient(180deg, #1a1a2e, #16213e);
  padding: 80px 20px;
}

Subtle card gradient

Low-opacity gradients are often more professional than saturated full-color ones on cards — they provide visual separation without dominating the layout.

Layering gradients over images

The background shorthand accepts multiple values separated by commas. Place the gradient first (on top), then the image:

.hero-with-image {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)),
    url('/img/hero.jpg') center / cover no-repeat;
}

This creates a dark overlay that improves text legibility over busy photos. Replace the linear gradient with a radial one to create a vignette effect, keeping the center brighter and darkening only the edges.

Animated gradient background

To animate a shifting gradient background, create an oversized gradient and animate its position:

.animated-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

This pattern is widely used for call-to-action sections and preloaders. The animation runs entirely on the GPU's compositor thread in most browsers, so it does not block the main thread.

Frequently asked questions

How do I make a gradient fill the full browser height?

Set min-height: 100vh on the element (or min-height: 100% on body with height: 100% on html). Using min-height rather than height ensures the gradient still grows if the content exceeds the viewport.

Why does my gradient look different on mobile?

Mobile screens are often taller relative to their width, which changes the visible portion of an angled gradient. Using direction keywords like to bottom right instead of degree values often helps, since keywords target the exact corner regardless of aspect ratio.

Can I use a gradient as a border?

CSS cannot directly apply a gradient to a border-color. The standard technique is to use border: none, set a gradient on the background, and use background-clip: padding-box combined with an outline, or use a pseudo-element with the gradient and offset it behind the element with z-index: -1.