CSS Gradient Generator

Build a linear or radial CSS gradient and copy the ready-to-paste rule.

OfficeBuild an invoiceFill, preview, and download a clean invoice PDF in minutes.Open
0%
100%
background: linear-gradient(90deg, #6a1b1b 0%, #f5f1ea 100%);

Linear gradients blend along a line you set with the angle (0° points up, 90° points right). Radial gradients blend outward from the center. Add up to six stops and slide each one to place the color exactly where you want it, then paste the background rule straight into your CSS.

How to make a gradient

Choose linear or radial, then set your color stops and their positions. For a linear gradient, drag the angle slider to aim the blend. The preview pane shows the result and the CSS box updates live.

Using the CSS

When the preview looks right, click Copy CSS to grab the full background declaration, then paste it onto any element in your stylesheet. The rule uses standard linear-gradient or radial-gradient syntax that every modern browser supports.

Questions

Does it support multiple color stops?
Yes. Start with two stops and add up to six, each with its own color and position. Slide a stop to move where its color lands in the blend; the live preview and the CSS update as you go.
What does the angle control?
For a linear gradient, the angle sets the direction of the blend: 0 degrees points straight up, 90 degrees points right, 180 down. Radial gradients ignore the angle and blend outward from the center instead.