How to Use
- 1
Choose a gradient type - linear (directional), radial (circular), or conic (angular sweep).
- 2
Click the color stops on the gradient bar to edit them. Add new stops by clicking on the bar; delete stops by dragging them off.
- 3
Copy the generated CSS code with one click and paste it as a background property in your stylesheet.
Frequently Asked Questions
What gradient types are supported? ▼
Linear, radial, and conic gradients are all supported. You can customize the angle or position, adjust color stops, and copy the complete CSS background property code.
Can I use more than two colors? ▼
Yes. Add multiple color stops anywhere along the gradient bar to create complex multi-color transitions. Each stop's position can be adjusted precisely by dragging.
How do I use the generated CSS? ▼
Click the Copy CSS button to copy the gradient declaration, then paste it as a background or background-image property in your CSS. It works in all modern browsers without any prefix.