CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually, with a live preview and copyable CSS output.
Configuration
Color Stops
Live Preview
About This Tool
Builds a CSS linear-gradient(), radial-gradient(), or conic-gradient() value from any number of color stops. Drag each stop position slider, pick its color, and the preview box and generated CSS update together: copy the result straight into a background declaration.
Generates standard gradient function syntax without external runtime dependencies or network requests.
Key Features
- 3 gradient types: Linear (with angle), radial (circular), and conic (angular sweep).
- Unlimited color stops: Add or remove stops freely, each with its own color and 0-100% position.
- Automatic stop sorting: Stops are always rendered in position order in the generated CSS, regardless of order added.
- Live preview: The preview box renders the exact gradient the CSS output describes.
- One-click copy: Copies the full background declaration directly.
- Fully client-side: Nothing is sent to a server: pure in-browser formatting.
Frequently Asked Questions
What is the difference between the three gradient types?
Linear transitions colors along a straight line at a given angle. Radial transitions outward from a center point in circles. Conic sweeps colors around a center point like a clock face, starting from the given angle.
Does the angle control apply to all three types?
Linear and conic both use the angle (linear: direction of the line; conic: starting angle of the sweep). Radial in this tool always expands from the center as a circle, so the angle control does not apply there.
Does stop order in the list matter?
No, stops are always sorted by their position percentage before being written into the CSS output, regardless of the order you added or edited them.
Can I use more than 2 color stops?
Yes, add as many as you want with "+ Add Stop." Each gets its own color picker and position slider.
Will this work directly in any CSS file?
Yes, the output is standard CSS gradient syntax supported by all current browsers, paste it as the value of any background or background-image property.
