Gradient Generator
background: linear-gradient(135deg, #0c6249 0%, #9a4212 100%);The gradient generator builds linear and radial CSS gradients from two colours, with control over the angle and where each colour stop sits. Moving the stops inward creates a harder transition; moving them apart or beyond the element edges creates a softer one.
How it works
A linear gradient angle in CSS is measured from the direction the gradient points towards, clockwise from upward. 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom.
- Stop positions are percentages along the gradient line, not along the element.
- Stops at 0% and 100% give a smooth transition across the whole element.
- Stops at 45% and 55% compress the blend into a narrow band, which reads as a soft edge rather than a gradient.
- Radial gradients ignore the angle entirely, since they radiate from a centre point.
Examples
A diagonal two-colour blend
Type
Linear
Angle
135deg
Stops
0% and 100%
Result
background: linear-gradient(135deg, #0c6249 0%, #9a4212 100%);
135deg points towards the bottom right, so the first colour starts at the top left. The full 0 to 100 percent range gives the smoothest possible blend.
A hard two-tone split
Angle
90deg
Stops
50% and 50%
Result
background: linear-gradient(90deg, #0c6249 50%, #9a4212 50%);
Placing both stops at the same position removes the transition entirely, producing a hard vertical edge. This is the standard way to make a two-tone background without two elements.
Frequently asked questions
Which way does 0deg point in a CSS gradient?
Upwards. CSS measures the angle towards which the gradient progresses, clockwise from up, so 0deg runs bottom to top and 90deg runs left to right. This trips people up because several design tools measure from the horizontal instead.
Why does my gradient look banded rather than smooth?
Because the browser is interpolating in 8-bit sRGB and a low-contrast gradient over a large area does not have enough distinct steps. Increasing the colour difference, reducing the area, or adding a subtle noise overlay all help. Wide-gamut interpolation with the in oklab keyword also reduces it in current browsers.
What happens if I put both colour stops at the same position?
You get a hard edge with no blend at all. This is the standard technique for a two-tone background, put both stops at 50% for an even split, or at any other value for an offset one.
Do stop percentages measure along the element or the gradient?
Along the gradient line, which for a diagonal angle is longer than either side of the element. That is why a 50% stop on a 135deg gradient does not fall on the element midpoint.