CSS Gradient

Pick colors, drag the angle, preview the linear-gradient live and copy the CSS in one click.

Angle 135°
CSS code
Click a swatch to change its color; “Random” generates a pleasing two- or three-color gradient.

FAQ

Which browsers support the generated CSS?
It is standard linear-gradient syntax, natively supported by Chrome, Firefox, Safari, Edge and all major mobile browsers — no -webkit- prefix needed.
Can I generate more than three colors?
We offer two-color and three-color modes; in three-color mode each stop is independently pickable, and stops are ordered in the generated CSS so you can add or remove more by hand.
Are my colors uploaded?
No. All computation and preview happen locally in your browser; nothing is sent anywhere.