CSS Gradient Generator
Build a linear or radial background gradient with multiple color stops and copy the CSS.
This generator runs entirely in your browser. Nothing is uploaded.
How to use this tool
Pick a gradient type at the top: Linear blends colors along a straight line, while Radial blends them outward from the center. For a linear gradient, drag the angle slider to set the direction (0 degrees points up, 90 degrees points to the right). Each row in the list is a color stop. Use the color picker to choose a color and the position field to set where that color lands, as a percentage from 0 to 100. Press Add color stop to create a multicolor gradient, or remove a stop you no longer want. The live preview updates as you change anything, and the generated CSS appears below. When you are happy with it, click Copy CSS to grab the full rule, or Copy background line for just the value.
How the CSS gradient works
A CSS gradient is an image generated by the browser, so it goes in any property that takes an image,
most often background. For a linear gradient the first argument is the angle, measured
clockwise from the top. Each following part is a color paired with an optional stop position. The
browser fills the space between stops with a smooth blend. A radial gradient works the same way but
grows outward from a center point instead of along a line, which is why it does not use an angle.
A real example
Say you want a sunset background. You set the type to Linear, the angle to 135 degrees, and three
stops: #ff7e5f at 0%, #feb47b at 50%, and #ffd194 at 100%.
The tool produces:
Paste that onto a div or the page body and you get a warm diagonal blend
that fades from orange-red in the top-left corner to soft yellow in the bottom-right.
Common questions
What is the difference between a linear and radial gradient?
A linear gradient blends colors along a straight line whose direction you set with an angle. A radial gradient blends colors outward from a center point in rings, like a spotlight, so it has no angle.
How does the angle color picker work for direction?
The angle slider controls the direction of a linear gradient. In CSS, 0 degrees points straight up, 90 degrees points right, 180 degrees points down, and 270 degrees points left. The color picker on each stop chooses the actual color at that point.
Can I make a multicolor gradient with more than two colors?
Yes. Click Add color stop to insert as many colors as you like. Set each stop's position to control where one color hands off to the next, then copy the generated background gradient CSS.
Where do I paste the generated CSS?
Put it in the style rule for the element you want, usually as the background property. For example, target a section or the body in your stylesheet and paste the full background line the tool gives you.
Is my work saved or sent anywhere?
No. The whole tool runs in your browser using plain JavaScript. Your colors and settings never leave your device, and nothing is uploaded to a server.