CSS Gradient Generator
Visually build linear and radial gradients, copy the CSS.
How to use
- Pick the gradient type: linear blends along a direction, radial blends outward in a circle from the center.
- For linear gradients, drag the angle slider (0–360°) to set the direction; the slider hides automatically for radial gradients.
- Set each color stop's value and position percentage. Use "Add stop" for up to 5 stops, or remove them down to a minimum of 2.
- The preview updates live. When you are happy, click "Copy" to grab the multi-line CSS and paste it into your stylesheet.
- Out of ideas? Hit "Random palette" to get a fresh, harmonious set of colors.
FAQ
How well is the generated CSS supported?
linear-gradient and radial-gradient are standard CSS syntax. Every modern browser — Chrome, Edge, Firefox, Safari and the major mobile browsers — supports them natively, so no -webkit- prefix is needed.
Why is there no angle slider for radial gradients?
A radial gradient spreads outward in a circle from its center, so its look depends on the center point and shape rather than an angle. This tool uses the standard circle at center syntax, which is why the angle slider hides in radial mode.
Can color stops be out of order?
Yes. CSS lets you place stops at any position and browsers sort them automatically. The preview always matches the generated code, and you can even use out-of-order stops to create hard, looping transitions.
How does the random palette work?
It picks one random hue and derives a set of HSL colors at fixed hue intervals, keeping saturation and lightness in ranges that work well for gradients, then distributes the stops evenly. That is why the results always look harmonious.