CSS Gradient Generator

A CSS gradient lets you blend two or more colors together as a background, without needing any image files.

Start by choosing your gradient type: Linear blends colors in a straight line, Radial spreads them out from a center point, and Conic sweeps them around like a color wheel.

Use the Color Stops to set which colors appear in your gradient and where. You can add as many stops as you like for more complex blends. The position slider on each stop controls where that color sits, so moving it left or right shifts where the blend happens. For a linear gradient, the angle slider lets you change the direction of the blend from horizontal to vertical to diagonal.

When you're happy with the result, click Copy CSS and paste the code directly into your stylesheet as the background property of any element. To learn more about gradients, see the CSS Gradients Lesson.