CSS gradient generator (linear and radial)
Create linear and radial CSS gradients visually and copy code that's ready to use. Add as many colors as you like, adjust their position and the gradient's angle, and see the result instantly in the preview. It generates the “background” property using the linear-gradient or radial-gradient function. It all happens in your browser, with no connection and no account needed.
How to create a CSS gradient
- Choose the gradient type: linear or radial.
- Adjust the colors (using the picker or their hex code) and their position as a percentage; add or remove colors as needed.
- For linear gradients, move the angle control to orient the transition.
- Copy the CSS code with “Copy” and paste it into your stylesheet.
Frequently asked questions
What is a CSS gradient?
It is a smooth transition between two or more colors, used as the background of a web element. In CSS it's created with the linear-gradient function (a straight-line transition, at an angle) and the radial-gradient function (a transition that spreads outward from a center point). It isn't an image: the browser draws it, so it looks crisp at any size and adds no extra weight.
How do I use the code on my website?
Copy the generated line (for example, “background: linear-gradient(90deg, #12b886 0%, #0b7261 100%);”) and paste it into the CSS rule for the element you want to apply the background to. It works in any modern browser, without prefixes.
What's the difference between linear and radial?
A linear gradient transitions the color along a straight line, whose direction you set with the angle (0° points up, 90° points right). A radial gradient starts from a center point and spreads outward in a circle toward the edges.
What do the percentage positions mean?
Each color has a position from 0% to 100% that shows where it sits along the gradient. With two colors at 0% and 100% the transition spans the whole range; moving them closer together creates sharper bands, and adding more colors lets you build multi-band palettes.
Is anything uploaded to a server?
No. The gradient is generated and previewed entirely in your browser; nothing is sent to any server, and the tool works offline once it has loaded.
Can I use more than two colors?
Yes. You can add several colors (color stops) and adjust each one's position to create multi-band gradients. To go back to something simpler, remove the extra colors — at least two are always kept.