CSS Gradient Generator
Build a linear, radial, or conic gradient with any number of color stops — drag the sliders to adjust angle and stop positions, then copy the generated CSS background value.
0%
100%
How to use
- Pick a gradient type and adjust the angle (for linear/conic).
- Add, remove, or recolor stops — drag each stop's position slider.
- Copy the generated CSS background declaration.
FAQ
What's the difference between linear, radial, and conic?
Linear transitions along a straight angle, radial expands outward from a center point in circles, and conic sweeps around a center point like a color wheel or pie chart.
Can I use this gradient as a background-image on any element?
Yes — the generated value is a standard CSS `background` shorthand; it works anywhere a background-image value is accepted, including buttons, cards, and full-page hero sections.