CSS Gradient Generator
100% PrivateWebsite & Webmaster ToolsBuild linear, radial and conic CSS gradients visually and copy the finished code.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Choose a gradient type: linear, radial or conic.
- 2Set the angle (or the radial shape).
- 3Adjust each color stop's color and position; add or remove stops as needed.
- 4Copy the CSS background declaration from the output box.
Linear type, angle 135deg, stops #0ea5e9 at 0% and #2563eb at 100% produces: background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
- Stops are sorted by position in the output even if you set them out of order, matching how CSS resolves them.
- Colors are emitted as hex values. For a gradient that fades to transparent, build it with the Box Shadow or Color tools' rgba output in mind: this generator's stops are solid hex colors.
- The generated code is a single background declaration; vendor prefixes are unnecessary in current browsers.
180deg points downward (the start color sits at the top). 90deg runs left to right, 0deg runs bottom to top.
About this tool
The CSS Gradient Generator builds linear, radial and conic gradients visually: pick the type, set the angle, place up to six color stops, and copy production-ready CSS. The preview updates with every change, so what you see is exactly what the generated background declaration produces.
Related tools
Part of Ovatly's free tools in Website & Webmaster Tools.