What is a color gradient?

A color gradient is a fill where the color changes across a surface instead of staying the same. You set a few key colors, called color stops, and the browser blends smoothly between them so every point on the shape gets its own color based on where it sits. The same idea covers a soft two color fade, a sunset that runs through many colors, and a glow that radiates out from a single point.

What are color stops in a gradient?

A color stop is one color pinned to a position along the gradient. Between any two stops the color slides smoothly from one to the next, so two stops make a simple fade and adding more stops lets the gradient pass through several colors on the way across. Positions are usually written as percentages, and moving them changes where each color sits and how much room the blend gets. Placing two stops at the very same position leaves no room to blend, which gives you a hard edge instead of a fade.

What is the difference between linear, radial and conic gradients?

They differ in how the gradient measures position. A linear gradient runs the colors along a straight line set by an angle, so the color changes in one direction across the shape. A radial gradient spreads the colors out in rings from a center point, so the color changes with distance from that point. A conic gradient sweeps the colors around a center by angle, like the hand of a clock, which is why it suits pie charts and color wheels.

What is a repeating gradient?

A repeating gradient defines one short run of color stops and tiles it across the shape instead of stretching it to fit once. Each gradient type has a repeating version: repeating linear makes stripes, repeating radial makes concentric rings like a target, and repeating conic makes evenly spaced wedges. You describe a single band of stops and the pattern copies itself as many times as the surface allows.

Gradients: Color That Depends on Position

A solid fill gives every pixel of a shape the same color. A gradient breaks that rule on purpose: the color you get depends on where you are on the surface. Stand at one edge and it is emerald green, drift across and it deepens to purple, and every point between has its own exact color. That is the whole idea, color as a function of position. Everything people label linear or radial or conic is just a different answer to one question, how the surface decides where you are.

Stops, The Colors And Where They Land

You never describe a gradient pixel by pixel. You set a handful of color stops and let the browser fill the gaps. A stop is a color tied to a position, and between any two stops the color slides smoothly from one to the next. Take the emerald green #1FC274 and purple #A65AD6 of the hummingbird on the cover: green at the start and purple at the end gives you a clean two color fade. Add a third stop between them and the run bends through that color on the way across.

Positions are where it gets expressive. With green at 0% and purple at 100% the blend runs evenly across the whole bar, but pin the green stop at 70% and it holds flat for most of the length before rushing into purple at the end. Put two stops at the very same position and the blend has no room to happen, so the color jumps instead of fading. That hard edge is not a flaw, it is how you build a flag of solid bands, the slices of a pie, or a two tone split down the middle.

Pick two colors below and watch the stops turn into a smooth run.

How The Surface Measures Position

Position needs a meaning, and that meaning is what separates the three families. A linear gradient measures position as distance along a straight line you aim with an angle, so the color stays constant across that line and changes only as you travel along it. A radial gradient measures position as distance from a center point, so the color moves in rings spreading outward, and you can shape those rings into a circle or an ellipse sized to reach the nearest edge or the farthest corner. A conic gradient measures position as the angle around a center, so the color sweeps around like a clock hand and lands back where it began. Same stops, three rulers: along a line, out from a point, around a point.

Stops Do More Than Hold A Color

Beyond a color and a position, a stop can be transparent. Set one end to a color and the other to that same color at zero opacity and the gradient fades out instead of shifting hue, which is how a dark scrim sinks into a photo or an edge dissolves into the page. You can hand a single stop two positions so it holds flat across a stretch, and you can drop a bare percentage between two stops to move the midpoint, the spot where the two colors sit evenly mixed, nearer one side than the other.

Repeating Gradients

A repeating gradient describes one short band of stops and tiles it across the shape. Repeating linear gives you stripes or a barber pole, repeating radial gives concentric rings like a target or a ripple, repeating conic gives even pie wedges or a starburst. The stops only need to spell out a single band, and the function copies it as far as the box runs.

A Gradient Is An Image

A gradient is technically an image, which is why it lives in background-image and not background-color. That has real consequences. You can size it, tile it, and stack several in one element, a faint transparent gradient sitting over a photo with another gradient underneath. That last trick, laying a see through gradient over an image, is the usual way to darken a picture just enough for white text to read on top of it.

It is the same instinct behind a color palette. The Spring theme is built on fresh greens warming into soft floral pinks, so dropping any two of its colors into a gradient gives you the green to pink wash the season is named for.

You can build linear, radial and conic gradients, drag the stops and copy the CSS in the gradient tool, and read the exact value of any stop color in the color tool.