CSS Gradient Generator
NEWBuild linear and radial gradients visually and copy the CSS.
How to use CSS Gradient Generator
- Choose Linear or Radial.
- Add, remove or drag color stops, and set each stop's color and position.
- For a linear gradient, adjust the angle too.
- Copy the generated CSS.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a chosen angle, while a radial gradient transitions outward in a circle from the center. Switch between them with the type toggle above the preview.
How many color stops can I add?
You can add as many stops as you like — each has its own color and position (0–100%). You need at least two stops, so the remove button is disabled once only two remain.
Can I control the gradient angle?
Yes, for linear gradients you can drag the angle slider from 0° to 360°. Radial gradients don't use an angle since they radiate from the center outward.
Community
Loading...