Ad Slot
CSS Gradient Generator
NEWCreate beautiful CSS linear and radial gradients visually.
Ad Slot
Ad Slot
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.
Ad Slot
Related tools
Ad Slot