CSS Gradient Generator
Design CSS gradients and copy the code.
#4f46e5#ec4899background-image: linear-gradient(135deg, #4f46e5, #ec4899);About CSS Gradient Generator
Design CSS gradients visually and copy production-ready code in one click. Pick your colors, add and drag color stops, and switch between linear and radial styles while a live preview shows exactly how the gradient will render. When it looks right, copy the generated background CSS straight into your stylesheet. Gradients add depth to hero sections, buttons, and cards without any image files, and building them by hand means guessing at angles and percentages. This generator removes the guesswork so you can experiment quickly, and it runs entirely in your browser with nothing to install and no signup required.
How to use this tool
- 1Pick two colors with the color pickers.
- 2Choose linear or radial, and adjust the angle for linear gradients.
- 3Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
What CSS does this generate?
It outputs a standard background-image declaration using linear-gradient() or radial-gradient(), supported by all modern browsers.
Can I use the gradient as a background?
Yes. Paste the copied CSS onto any element, e.g. a body, div, or button background.