Related Tools
How to Use
- 1Choose a gradient type: Linear, Radial, or Conic.
- 2Adjust the angle with the slider or quick preset buttons (Linear/Conic only).
- 3Pick colors for each stop using the color pickers.
- 4Drag the position slider to move each color stop.
- 5Add or remove color stops as needed.
- 6Click Copy to copy the CSS background property.
About CSS Gradient Generator
The CSS Gradient Generator supports all three CSS gradient types: linear-gradient, radial-gradient, and conic-gradient. Adjust angle, colors, and stop positions with sliders and see the result update live.
The generated CSS is a single background property that you can paste directly into any stylesheet. Choose from built-in presets or build your own from scratch.
Frequently Asked Questions
What gradient types are supported?
Linear (directional), Radial (circular from center), and Conic (angular around a point). All correspond to native CSS gradient functions.
How do I use the copied CSS?
Paste it into your CSS or style attribute, e.g.: .element { background: linear-gradient(...); }
Can I add more than 2 color stops?
Yes. Click "Add Stop" to insert additional color stops. CSS gradients support any number of stops.