How to Add a Gradient Background in CSS (Step-by-Step)

A gradient background is one of the easiest ways to make a page feel modern and polished. This step-by-step tutorial shows you how to add one in plain CSS — no images, no libraries.

Want to skip ahead and grab a ready-made one? Browse the PaletteCSS gradients gallery.

Step 1: Full-page gradient background

body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);
}

Using min-height: 100vh ensures the gradient covers the whole viewport even on short pages.

Step 2: Section background

.hero {
  background: linear-gradient(135deg, #ff8a3d, #f4600a);
  color: #fff;
  padding: 80px 24px;
}

Step 3: Keep the gradient fixed while scrolling

body {
  background: linear-gradient(120deg, #2193b0, #6dd5ed);
  background-attachment: fixed;
}

Step 4: Layer a gradient over an image

.banner {
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('/photo.jpg') center/cover;
}

This darkens the photo so white text stays readable.

Choosing the right colors

The best gradient backgrounds use two colors from the same color palette. Not sure which direction to use? Read linear vs radial gradients. For the full property reference, see the MDN guide to using CSS gradients.

Frequently asked questions

Why is my gradient background not showing?

Make sure the element has height. A <div> with no content collapses — add padding or a min-height.

Can I animate a gradient background?

Yes — animate background-position on an oversized gradient for a smooth shifting effect.

Next, explore the gradients gallery or read the best CSS gradient generator workflow.