Build a CSS gradient visually
Build a linear or radial CSS gradient visually, with live preview and copyable CSS.
Linear gradients also let you set the angle; radial always expands outward from the center.
Pick a color for each stop and drag its position slider. Add up to 5 stops for multi-color gradients.
The background declaration updates live and is one click away in the copy box.
Frequently asked
What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at whatever angle you set. A radial gradient transitions outward from a center point in a circle, so it doesn't have an angle control.
Why does my gradient look different from the color stop order I added?
Gradients render stops by their position value, not the order you added them in. This tool sorts stops by position before building the CSS string, so what you see in the preview always matches the generated code.
How many color stops can I add?
Between 2 and 5. Two stops gives a simple two-color fade; more stops let you build multi-color gradients.
Does this work for text or border gradients too?
The generated value is a standard CSS gradient function, so you can drop it into background, or use it with background-clip: text for gradient text, or border-image for a gradient border.