Random gradient generator
Press Generate for a new gradient with random colors and angle. Pick linear or radial and the number of colors, copy the CSS, and save the ones you like: the list stays in your browser.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose Linear or Radial and 2, 3 or 4 colors.
- Press Generate until you see one you like.
- Copy the CSS, or press Save to history to keep it. Click a saved thumbnail to show it again.
How it works
Each color is made from a random hue (0–359°), a saturation of 55–90 percent and a lightness of 40–70 percent in HSL, then written as HEX. Stops are spaced evenly from 0 to 100 percent. For a linear gradient the angle is also random (0–359°). Random numbers come from crypto.getRandomValues.
Example
A result might look like background: linear-gradient(212deg, #7f3fe0 0%, #e0529c 50%, #f5a623 100%);.
Tips
- Two colors give calm, clean gradients; four give more variety but can look busy.
- Check text that you place on top of a gradient at its lightest and darkest point.
- Saved gradients are only on this browser; copy the CSS if you need them elsewhere.
Frequently asked questions
Are the gradients really random?
Yes. The numbers come from your browser's cryptographic random generator (crypto.getRandomValues), not from a fixed list. To keep the result pleasant, saturation and lightness are limited to a range, so only the hue and the angle vary widely.
Where is my history stored?
In your browser's local storage on this device, up to 12 gradients, newest first. Nothing is sent anywhere. Clearing site data or using the Clear button removes it.
How do I use the result?
Paste the line into a CSS rule, for example on body or a div. The gradient is plain CSS with HEX colors and works in all current browsers.
Can I edit a gradient I like?
Copy its code and rebuild it in the gradient generator, where you can change each color, stop position and the angle by hand.