CSS Gradient Generator β design gradients visually
Create linear and radial CSS gradients with a live preview and copy the ready-to-use background code.
π Runs entirely in your browser. Your input and output are never sent to a server or stored β fully private.
About this tool
Design linear and radial CSS gradients visually: add color stops, drag them to reposition, and set the angle while a live preview updates as you go. When it looks right, copy the ready-to-paste background code into your stylesheet. Everything runs in your browser.
Frequently asked questions
How do I create a CSS gradient?
Choose linear or radial, pick two or more colors and position their stops, then adjust the angle or center. The tool writes the corresponding background value for you β just copy it and paste it into your CSS rule.
What is the difference between a linear and a radial gradient?
A linear gradient blends colors along a straight line at the angle you choose, while a radial gradient blends them outward from a center point in circles or ellipses. Linear suits backgrounds and buttons; radial is handy for spotlights and soft glows.
Is anything sent to a server?
No. The preview and the generated code are produced entirely in your browser, so nothing about your design is uploaded or stored.