← All Tools
Gradient Generator🔒 100% local
Create beautiful CSS gradients (linear, radial, conic) with multiple color stops.
Gradient Type
Angle (deg)
Color Stops (2/10)
Stop Position %
Stop Position %
Related Tools
Builds a CSS gradient from a type, an angle and a list of colour stops, then shows the resulting background declaration with a live preview above it. There are two to ten stops, each a colour chosen with the browser's own colour control plus a percentage position. The declaration is assembled from the values on screen; no colour service is involved.
How to use it
- Choose Linear, Radial or Conic from the type menu.
- Set the angle in degrees for linear and conic. The field is hidden for radial, which ignores it.
- Adjust the two default stops, add up to eight more, then press Generate CSS and copy the declaration.
Worked example
Linear, 90deg, the two default stops #0A0F2C at 0% and #CC2B22 at 100%becomesbackground: linear-gradient(90deg, #0A0F2C 0%, #CC2B22 100%);Conic, 45deg, #FF0000 at 0%, #00FF00 at 50%, #0000FF at 100%becomesbackground: conic-gradient(from 45deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);When to use it
- You need a background that matches a two-colour brand palette and want exact stop positions to hand to whoever writes the CSS.
- You want to compare the same stops as linear, radial and conic without editing values in a browser inspector.
- A hero banner or thumbnail only needs a gradient, and generating an image for it would be overkill.
What it does not do
- Radial output is always radial-gradient(circle, ...): no size keyword, no position, and no way to make it elliptical.
- Stop positions are plain percentages. The tool appends % to whatever number you type, so px and em stops, and stops with no position at all, are not possible.
- Only the background declaration is written. There is no fallback colour, no vendor prefix, and no check that the stops are in ascending order - unordered stops are valid CSS and render accordingly.