Free tool · No sign-up

CSS Gradient Generator

Pick two colors, choose a linear or radial style, set the angle, and this generator shows a live preview with the ready-to-paste CSS. Copy the background property straight into your stylesheet. Free, instant, and it runs entirely in your browser.

Color 1

Color 2

StyleAngle (90°)

CSS

background: linear-gradient(90deg, #ff0080, #7928ca);

Frequently asked questions

Use the background property with linear-gradient() or radial-gradient(), passing an angle (or shape) and two or more color stops — for example background: linear-gradient(90deg, #ff0080, #7928ca). Set your colors and angle above and copy the generated code.

A linear gradient blends colors along a straight line at the angle you set, while a radial gradient blends outward from a center point in a circle. This tool generates both — switch the style to compare them.

Yes — linear-gradient and radial-gradient are supported in every modern browser without vendor prefixes, so the generated code works in current versions of Chrome, Firefox, Safari, and Edge.

Yes — free, no sign-up, and the preview and code are generated entirely in your browser.