A color scale, often called a gradient, lets one color flow into another across an area. Think of a painted sky shifting from yellow near the horizon to blue above it. In CSS, this effect is generated by the browser as an image and used as an element’s background. A gentle blend can add visual interest without asking the page to do too much at once. section 17.18 section 17.0
Two common forms create very different motion. A linear gradient travels along a straight line, such as left to right or corner to corner. A radial gradient spreads outward from one point, forming an ellipse or circle. Both combine two or more colors, and the transition may be gradual or quick. section 17.18
Build a linear color scale in small pieces:
- Set background-image to linear-gradient(). section 17.19
- Choose a direction with an angle such as 60deg, or with words such as to top right. section 17.19
- Add colors in their travel order. The first begins at 0% and the last ends at 100% unless you say otherwise. section 17.19
- Place a percentage after a color when its transition should begin at a particular position. section 17.19
A three-color sweep
Use a background color first, then layer a linear gradient over it: background-color: blue; background-image: linear-gradient(to top right, red, white 25%, blue); The color travels from the bottom left toward the top right. White starts its transition at 25%, earlier than the default middle position, before the scale continues to blue. section 17.22
div {
background-color: blue; #1
background-image: linear-gradient(to top right, red, white 25%, blue); #2
height: 175px; #3
width: 100%; #3
}
Inspect the complete CSS rule to see the fallback color, gradient declaration, and the dimensions that make the background visible. section 17.22
With three or more colors, stop positions control the rhythm of the blend. Leave them out and the browser spaces the transitions for you: in a three-color scale, the middle transition lands at 50%. Add a percentage when you want a color to arrive sooner or later. section 17.21
For a radial color scale, use radial-gradient() as the background image. Its rule can describe the shape, how far the scale extends, where it begins, and its color stops. For example, an ellipse can begin at the top left and spread from yellow to blue. section 17.25 section 17.27
A background-color is useful as a fallback: browsers that cannot display gradients ignore the gradient rule but can still show that solid color. Modern major browsers support linear and radial gradients with standard syntax, so vendor prefixes are unnecessary. section 17.27 section 17.21
If choosing directions, colors, and stops feels like arranging paint tubes, use a Gradient Construction Kit. Select Linear or Radial, adjust its options and colors, preview the result, then copy the generated cross-browser CSS into a project. section 17.28
Try making a corner-to-corner linear scale with #76a5af at the start and #073763 at the finish. Then make the same idea radial and compare the feeling: one color travels across the area, while the other grows outward from a point. section 17.21 section 17.27
