What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circle or ellipse shape.
Design Tools
CSS Gradient Generator
Build linear or radial gradients with multiple color stops and copy the CSS. Everything runs locally in your browser.
FAQ
CSS Gradient Generator FAQ
Can I add more than two color stops?
Yes. Add as many color stops as you need, each with its own color and position percentage, to build multi-color gradients.
Is my gradient data sent anywhere?
No. The preview and generated CSS are built entirely in your browser with JavaScript — nothing is sent to TripleW Tools or any server.
Can I apply a gradient to text instead of a background?
Yes — use the Gradient Text Generator, which builds the background-clip CSS for gradient-colored headings and logos.