Color stops
Learn color stop positioning.
Color stop positions
You can give color stops a position as a percentage or length. linear-gradient(to right, blue 10%, white 90%) tells blue to start at 10% and white at 90%; the blend is drawn between these two points.
Without positions, stops spread evenly. With positions, the browser only shifts the start and end points; the blend stays smooth.
Gradient hint
To control where the blend between two stops is strongest, use a gradient hint: a single percentage between two colors. linear-gradient(blue, 30%, white) makes the blend peak at the 30% mark.
It is a shortcut for shifting the blend without adding a new color. Especially useful for fine-tuning light and shadow transitions.
Exercise Add a positioned gradient to the card background
Define a background for the .card-hero selector. The value must be a linear-gradient() function with direction to bottom and colors navy 10% and teal 90%. Use only the background property.
Show example solution
/* positioned gradient on card */
.card-hero {
background: linear-gradient(to bottom, navy 10%, teal 90%);
}Test yourself
-
What does blue 20% mean?
linear-gradient(to right, blue 20%, white);- Blue takes up 20% of the width
- Blue has 20% opacity
- Blue ends at 20%
- Blue's blend starts at the 20% mark
Show answer
Blue's blend starts at the 20% mark — Correct. blue 20% says the blue blend starts at the 20% mark.
-
Add a percentage position to a color stop
background: linear-gradient(to right, blue ____, white);Show answer
background: linear-gradient(to right, blue 20%, white); -
Match each position form to its meaning
- 20%
- Percentage position
- 50px
- Length position
- from 0deg
- Angular start
- at center
- Center position