CSS Gradient Generator
Runs in your browser — your data is never uploaded.
Build a linear, radial or conic CSS gradient and copy the rule straight into your stylesheet. Set the angle, the start and end colours, and optionally a midpoint stop. The output includes the two notes that trip people up most: which way an angle actually points, and why a gradient behaves like a background image rather than a background colour.
How to use CSS Gradient Generator
- 1
Choose linear, radial or conic.
- 2
Set the angle and pick your colours.
- 3
Click “Generate” and copy the CSS.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
Which way does the angle point?+
0deg runs bottom to top, and 90deg runs left to right. That is the CSS convention and it is rotated from the compass bearing most people picture, which is why gradients so often come out at right angles to what was intended.
Why is my gradient not showing?+
A gradient is a background-image, not a background-color. It needs the element to have a size, and any background-color you set will sit behind it rather than replacing it. An element with no height shows nothing.
How do I make a gradient look smooth?+
Pick two colours that are close in lightness. A gradient between colours with very different lightness passes through a muddy middle — adding a midpoint stop in a related hue is the usual fix.