Backgrounds and gradients

More than a colour

You can give any element a background-color. CSS goes much further: an element can have images, gradients and several layers. The long names are:

The background shorthand sets several at once. When you only need a colour, background: #f1f5f9; is fine.

Gradients: images made by CSS

A gradient is an image the browser draws for you: no file to download, no pixelation at any size. They go in background-image (or background).

<style>
  .g { height: 70px; margin: 8px 0; border-radius: 8px; }
  .g1 { background: linear-gradient(to right, #6366f1, #ec4899); }
  .g2 { background: linear-gradient(135deg, #f59e0b, #ef4444 60%, #7c3aed); }
  .g3 { background: radial-gradient(circle at 30% 40%, #fde68a, #f59e0b 60%, #b45309); }
</style>
<div class="g g1"></div>
<div class="g g2"></div>
<div class="g g3"></div>

linear-gradient

background: linear-gradient(to bottom, #fff, #ccc);   /* default direction */
background: linear-gradient(90deg, red, blue);        /* an angle: 0deg up, 90deg to the right */
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 60%, #7c3aed 100%);

The first value is the direction (a keyword like to right, or an angle). After it come colour stops, each optionally with a position. Add as many as you want. Hard edges appear when two stops share a position: linear-gradient(red 50%, blue 50%) makes two flat halves.

radial-gradient

radial-gradient(circle at 30% 40%, yellow, orange) spreads colour from a centre point outward. ellipse is the default shape. conic-gradient sweeps colour around a point, ideal for pie charts and colour wheels.

Images as backgrounds

.hero {
  background-image: url("sunrise.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

• cover fills the box and crops the excess (usually right for heroes).
• contain fits the whole image inside, possibly leaving gaps.
• background-position picks which part stays visible when cropping.
• background-attachment: fixed pins the image to the viewport for a parallax feel. It is unreliable on phones; avoid it for anything important.

Layering backgrounds

Separate multiple backgrounds with commas. The first is on top:

<style>
  .hero {
    min-height: 140px;
    padding: 24px;
    color: white;
    border-radius: 10px;
    background:
      linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),   /* dark overlay on top */
      linear-gradient(120deg, #38bdf8, #a78bfa);                /* stand-in for a photo */
  }
</style>
<div class="hero"><h2 style="margin:0">Readable on any background</h2>The overlay darkens whatever is beneath.</div>

The semi-transparent black layer on top sits over the colourful layer below. With a real photo as the lower layer, this is the standard way to make text legible on pictures.

Readability first

Beautiful backgrounds often ruin text. Always ask: can everyone read this?

• Check contrast: normal text needs at least 4.5:1 against the colour behind it. Use the Image Colour Picker to sample a background, and the browser DevTools contrast tool to check.
• For photos, add an overlay or a gradient behind the text, or place text on a solid panel.
• Do not rely on a background image to carry meaning: it has no text alternative.
• Provide a background-color that matches the image's main tone, so text stays readable if the image fails to load.

Patterns and tricks

• Stripes: repeating-linear-gradient(45deg, #eee 0 10px, #ddd 10px 20px).
• Dot grids with radial-gradient and background-size: 20px 20px.
• Gradient text with background-clip: text and a transparent text colour. Check the contrast.
• Smooth section transitions with a gradient fading into the next section's colour.

Performance

A gradient costs nothing to download, and a CSS background is cached with your stylesheet. Large photo backgrounds, though, are heavy: compress them, use modern formats, and consider a smaller image for small screens.

Common mistakes

• Text on a busy photo with no overlay.
• A photo that needs alt text used as a background.
• Forgetting background-repeat: no-repeat, so a small image tiles.
• No fallback colour.
• Fixed attachment on mobile.

Exercise

Create a hero box with a diagonal two-colour gradient, white heading text, and make sure text contrast is good by darkening the gradient with a semi-transparent layer.

<style>
  .hero {
    padding: 32px;
    border-radius: 12px;
    color: #fff;
    background:
      linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35)),
      linear-gradient(135deg, #0ea5e9, #8b5cf6);
  }
</style>
<section class="hero"><h2>Learn at your own pace</h2><p>Free lessons for everyone.</p></section>