CSS Gradient Generator
Drag color stops to build linear, radial, or conic gradients and copy the CSS in one click.
Color stops
How to Use
Choose linear, radial, or conic gradient depending on the look you want.
Use the + button to add stops, drag the slider to set each stop's position (0–100%), and pick a color from the swatch.
Adjust angle (linear), shape and origin (radial), and copy the resulting CSS in one click.
FAQ
How many color stops can I add?
Up to 8. Most visually balanced gradients use just 2–4 stops.
Is conic gradient widely supported?
Yes — Chrome 69+, Safari 12.1+, and Firefox 83+. Older browsers may not render it.
How do I use the code?
Paste it directly into a `background:` property. It also works inside CSS variables or Tailwind arbitrary values like `bg-[linear-gradient(...)]`.
Does it support alpha (transparency)?
Yes. Use 8-digit hex (#RRGGBBAA) or rgba() in the color picker fields.
Is anything sent to a server?
No. Everything happens in your browser; nothing leaves the page.
