What is Gradient to CSS?

A visual gradient builder that lets you design linear, radial, and conic gradients with multiple color stops, then copies the exact CSS code. Adjust angles, positions, and colors with a live preview — no hand-coding required.

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

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

Related Tools