About CSS Gradient Generator
CSS gradients render smooth colour transitions directly in the browser, with no image request and no loss of quality at any screen density. Linear gradients blend along a straight axis, while radial gradients spread outward from a point.
How to use
- Choose a linear or radial gradient.
- Set your colour stops and the angle or position.
- Copy the generated CSS into your stylesheet.
Frequently asked questions
How does the angle work in a linear gradient?
The angle sets the direction the gradient travels. 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom.
Why use a gradient instead of an image?
Gradients add no HTTP request, weigh almost nothing, scale perfectly on any display, and can be edited by changing a line of CSS rather than re-exporting an asset.
What are colour stops?
Each stop pairs a colour with a position along the gradient axis. Placing stops closer together produces a sharper transition; identical positions create a hard edge.