CSS Gradient Generator
Design CSS gradients and copy the code.
#4f46e5#ec4899135deg
background-image: linear-gradient(135deg, #4f46e5, #ec4899);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.