The Three CSS Gradient Functions
CSS offers three gradient functions and they behave differently. linear-gradient runs along an angle, where 0deg points up and values increase clockwise. radial-gradient spreads outward from a centre point as a circle or an ellipse. conic-gradient sweeps around a centre point, which is what makes pie charts and colour wheels possible. Each accepts colour stops with explicit positions, and each has a repeating- variant that tiles the stop list to build stripes and rings. This generator edits those stops directly and shows the exact declaration to copy.
How to Build a Gradient
- 1Choose linear, radial or conic. The angle control appears for linear and conic; radial offers a circle or ellipse shape instead.
- 2Drag a stop's position slider to move it along the gradient, and use the colour swatch to change its colour.
- 3Add up to eight stops. New stops are spaced evenly so the gradient stays balanced while you experiment.
- 4Turn on Repeating to tile the stop list, which is how striped and ringed backgrounds are made.
- 5Copy the generated declaration and paste it into your stylesheet.
What Gradients Are Used For
Hero and section backgrounds
Produce a two or three stop linear gradient that reads well behind headings without adding an image request.
Buttons and cards
Build subtle vertical gradients for interactive surfaces and copy the exact declaration into a component.
Charts and progress rings
Use a conic gradient to draw a pie segment or a circular progress indicator with pure CSS.
Repeating patterns
Combine repeating gradients with hard stops to create stripes, checks and ruled backgrounds without an SVG.
Frequently asked questions
Which direction does 0deg point in a linear gradient?
In CSS, 0deg points to the top of the element and the angle increases clockwise, so 90deg points right and 180deg points down. This differs from the older -webkit- prefixed syntax and from the convention used in most mathematics, which is a common source of flipped gradients.
How do I create hard colour bands instead of a smooth blend?
Place two stops at the same position, for example red 50% followed by blue 50%. The colour changes abruptly at that point. Combining that technique with the repeating variant produces stripes.
Should I use background or background-image?
This tool emits background-image, which is the specific property a gradient sets. Using the background shorthand also works, but it resets other background properties such as colour and position, which can silently undo earlier declarations.
Are conic gradients widely supported?
conic-gradient is supported in all current major browsers. If you need to support very old versions, provide a solid background-color declaration before the gradient so unsupported browsers fall back to it.