CSS Gradient Generator
Choose linear or radial gradient, set the angle, and add as many color stops as you need with custom colors and positions. See a live preview and copy the ready-to-paste CSS property. All processing runs in your browser.
Build a CSS linear or circular radial gradient with editable color stops, stop positions, and a linear-gradient angle, then copy one background declaration.
How to generate a CSS gradient
- Choose Linear or Radial.
- Add, remove, recolor, and reposition gradient stops between 0% and 100%.
- For linear gradients, set the angle and copy the generated background declaration.
How gradient output is built
Stops are sorted by numeric position before output, even if they were added in a different order.
Linear mode outputs linear-gradient(angledeg, stops). Radial mode outputs radial-gradient(circle, stops) and does not expose size, position, ellipse, repeating, or conic-gradient controls.
Privacy and limitations
Gradient editing and preview rendering happen locally in your browser. The tool generates standard CSS text only and is limited to linear gradients and circle-shaped radial gradients.
CSS gradient FAQ
Can I add more than two color stops?
Yes. Use Add Stop and remove extra stops when needed.
Are stops automatically sorted?
Yes. Output is sorted by stop percentage.
Does radial mode use the angle?
No. The angle control is hidden for radial gradients.
Does it support conic gradients?
No. Only linear and circle radial gradients are available.
Does it support repeating gradients?
No. It generates non-repeating gradients.