What is Gradient to CSS?

A visual gradient builder that lets you design linear, radial, and conic gradients with multiple color stops, then copy the CSS code. Adjust angles, positions, and colors with a live preview.

How to use

1. Choose a gradient type (linear, radial, or conic) and set the direction or angle.
2. Add, remove, or adjust color stops by clicking the gradient bar or using the color pickers.
3. Copy the generated CSS code to use directly in your stylesheet.

Result

Try a sunset gradient: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — great for a hero section background.

Related Tools