CSS gradient generator
Design a gradient visually and copy the CSS to use it as a background on your site.
Everything runs in your browser. Nothing you type or paste is sent to a server.
How to use the CSS gradient generator
- 1
Choose the type: linear, radial or conic.
- 2
Adjust the colors, their positions and the angle.
- 3
Copy the CSS code.
About this tool
The code includes a fallback color for very old browsers, followed by the gradient. It works in every modern browser without prefixes.
Add up to eight colors, start from an example or ask for a random one for inspiration.
Frequently asked questions
Where do I paste the code?
In the CSS rule of the element you want to style, for example body or .hero.
Can I use it on text?
Yes, combine it with background-clip: text and color: transparent.
Related tools
- Images
Favicon Generator
Create favicon.ico and every icon your site needs from an image or letters.
- Images
Image Color Palette
Extract the main colors of an image and export them.
- Developer
JSON Formatter
Beautify JSON with readable indentation.
- Developer
JSON Validator
Check whether JSON is valid and find the error.