Random Gradient Generator
Choose two to six color stops, a gradient type and an optional seed. The generated CSS is a starting point for your design.
A QUICK WALKTHROUGH
How to use this tool
- Enter an optional seed and choose the stop count and type.
- Generate and review the gradient preview.
- Copy the CSS or select it manually if clipboard access fails.
Generation rules
Each stop uses hue 0–359°, saturation 55–84% and lightness 38–67%. Stop positions are evenly spaced and rounded to whole percentages. Linear angles use 0–360°; radial gradients use circle.
Seed and randomness
A nonempty trimmed seed drives a local deterministic generator. With no seed, the browser cryptographic random source is used when available, otherwise Math.random. This is a design generator, not a security random generator.
Limits and privacy
The count is clamped to2–6 and rounded down; an empty or nonnumeric count uses the existing3-stop value. Generation, preview and copying stay in the browser. No text contrast or accessibility guarantee is made.
GOOD TO KNOW
Common questions
Will a seed reproduce the gradient?
Yes, with the same seed, normalized count and type in this implementation. Different seeds can coincide; no uniqueness is promised.
Does it guarantee readable text?
No. Check contrast in your actual design.