Backgrounds and gradients · CSS

Background images

HTML

<style>
  .hero { height: 200px; border-radius: 12px; display: grid; place-items: center;
          background-image: url("https://picsum.photos/seed/peaks/1200/600");
          background-size: cover; background-position: center;
          color: white; font: 700 28px system-ui; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
</style>
<div class="hero">Mountains, covered</div>

background-size: cover scales the image to cover the whole box, cropping whatever doesn't fit.
background-position chooses which part stays visible: center, top, left bottom, 30% 70%...

cover vs contain

HTML

<style>
  .row { display: flex; gap: 12px; }
  .row div { width: 180px; height: 120px; border: 2px solid #5a48f5;
             background: #f4f2ff url("https://picsum.photos/seed/wide/600/200") no-repeat center; }
  .row .cover   { background-size: cover; }
  .row .contain { background-size: contain; }
</style>
<div class="row">
  <div class="cover"></div>
  <div class="contain"></div>
</div>
<p style="font: 13px system-ui">Left: cover, cropped to fill the box. Right: contain, the whole image with gaps.</p>

Repeating patterns

HTML

<style>
  .dots { height: 120px; border-radius: 12px; background-color: #11151f;
          background-image: radial-gradient(#8577ff 1.5px, transparent 1.5px);
          background-size: 18px 18px; }
</style>
<div class="dots"></div>

Backgrounds repeat by default (background-repeat: repeat). Here, a tiny 18px tile with one dot repeats into a pattern. Use no-repeat when you want a single copy.

Linear gradients

HTML

<style>
  .g { height: 56px; margin: 8px 0; padding-left: 14px; border-radius: 10px; display: flex; align-items: center;
       color: white; font: 600 14px system-ui; }
</style>
<div class="g" style="background: linear-gradient(#5a48f5, #0aa9cf)">top to bottom, the default</div>
<div class="g" style="background: linear-gradient(to right, #ff7a59, #e0446a)">to right</div>
<div class="g" style="background: linear-gradient(135deg, #0f172a, #5a48f5 60%, #0aa9cf)">135deg, three colours</div>
<div class="g" style="background: linear-gradient(to right, #5a48f5 50%, #0aa9cf 50%)">a hard stop at 50%</div>

A gradient is an image the browser draws, so it goes in background or background-image, not background-color. Colour stops can carry positions (#5a48f5 60%), and two stops at the same position make a hard edge.

Radial and conic gradients

HTML

<style>
  .row { display: flex; gap: 14px; }
  .row div { width: 120px; height: 120px; border-radius: 50%; }
</style>
<div class="row">
  <div style="background: radial-gradient(circle at 30% 30%, #fff, #5a48f5 60%, #1e1452)"></div>
  <div style="background: conic-gradient(#5a48f5 0 40%, #0aa9cf 0 75%, #e0663a 0)"></div>
  <div style="background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red)"></div>
</div>

radial-gradient spreads out from a point, so the first circle looks lit from the top left. conic-gradient sweeps around the centre: with hard stops it draws a pie chart (40%, 35% and 25%) without any image.

Layers: readable text on a photo

Several backgrounds can be stacked, separated by commas, and the first is drawn on top. A dark gradient over a photo keeps white text readable on any picture:

HTML

<style>
  .banner {
    height: 180px; padding: 20px; box-sizing: border-box; border-radius: 12px;
    display: flex; align-items: flex-end; color: white; font: 700 24px system-ui;
    background:
      linear-gradient(to top, rgba(10, 8, 30, .85), rgba(10, 8, 30, 0) 70%),
      url("https://picsum.photos/seed/city/1200/500") center / cover;
  }
</style>
<div class="banner">Readable text on any photo</div>

Inside the shorthand, center / cover means "position / size".

Gradient text

HTML

<style>
  h1 { margin: 0; font: 900 44px system-ui; color: transparent;
       background: linear-gradient(90deg, #5a48f5, #0aa9cf);
       -webkit-background-clip: text; background-clip: text; }
</style>
<h1>CodeMIRAI</h1>

background-clip: text paints the background only inside the letters, and color: transparent lets it show through. The -webkit- version is still needed for some browsers.