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

Next lesson: Layered gradients

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies