How do I create a hard stripe instead of a blend?

Place two stops at the same position. The color changes abruptly at that point rather than transitioning.

Why does my gradient look banded?

Banding appears when a long run has too few distinct intermediate values for the display to render smoothly. Adding a stop in the middle of the run usually helps more than changing the endpoint colors.

What does the PNG export contain?

The rendered gradient at a fixed size. It does not include any text, layout or elements you might place over the gradient on a page.

Gradient Generator

Angle

deg

0 points up and the angle increases clockwise.

Repeat the stop list until the element is filled

Drag a handle, or focus one and use the arrow keys. Double-click the track to add a stop, and press Delete to remove one.

Color stops

Stop 1 color
Stop 1 position (%)
Stop 2 color
Stop 2 position (%)
Stop 3 color
Stop 3 position (%)

Gradient code

CSS output

.gradient {
    background-image: linear-gradient(90deg, #167d8d 0%, #4b526b 50%, #ee8756 100%);
}

Linear, radial and conic

A linear gradient blends along a straight line whose direction you set in degrees, with 0 pointing up and the angle increasing clockwise. A radial gradient spreads outward from a point, as a circle or an ellipse, which suits spotlights and soft background washes. A conic gradient sweeps around a centre point and is what pie charts and colour wheels are built from.

All three read the same list of color stops, so you can switch type without rebuilding the gradient and compare how the same colors behave in each.

Working with color stops

Each stop is a color and a position from 0 to 100 percent. Drag a handle along the track, or use the arrow keys for single-percent steps and Home and End to jump to either end. Two stops are the minimum and eight the maximum.

Placing two stops at the same position creates a hard edge instead of a blend, which is how stripes and colour bands are made. Clustering stops near one end compresses the transition there and leaves a long flat run at the other.

Banding, accessibility and export

Gradients between two colors of similar lightness can show visible banding on lower-quality displays, and the effect is more noticeable across large areas. Adding an intermediate stop usually smooths the run more reliably than changing the endpoints.

Contrast requirements apply to text over a gradient at every point along it, not only at its midpoint. Keep essential text off the gradient, or check it against the lightest and darkest part it crosses. The PNG export renders the gradient itself and does not include any text you place over it.

Frequently asked questions

Zero degrees points to the top and the angle increases clockwise, which is what the CSS linear-gradient specification defines. Ninety degrees therefore runs left to right.