Gradients

A smooth blend from one color to another looks like a color, but CSS treats it as an image. The browser draws it from a short description, such as "cream at the top, peach at the bottom", at whatever size the element has, so no image file is downloaded. Such a drawn image is called a gradient, and because it is an image, it goes in background-image, never in background-color.

The running example

Here is the travel card with a gradient background that fades from the card's cream to a light peach.

<!DOCTYPE html>
<html>
<head>
  <title>Gradients</title>
  <style>