Gradient Generator
Build linear, radial and conic CSS gradients and copy the code
About Gradient Generator
Creates a CSS gradient between two or more colors, with a live preview, and generates the corresponding CSS code to copy directly into a project.
Choose your colors and gradient direction, add more color stops if you want a richer gradient, adjust until the preview looks right, and copy the generated CSS.
Gradients with colors that are too close in hue can look muddy rather than smooth — a gradient between two genuinely different hues (rather than two shades of the same color) often reads as more intentional and polished. With three or more colors, keep an eye on the middle stops especially — an unplanned color sitting between two others can create a muddy transition zone that neither endpoint color would produce alone.
Watch: Gradient Generator in Action
- Can I preview the gradient before copying the CSS?
- Yes — adjust the gradient live and preview it applied to a sample element before copying the generated CSS code into your project.
- Why did my stop positions change when I added a color?
- Adding or removing a stop re-spaces all stops evenly across 0 to 100 percent, so earlier edits to the "at" boxes are replaced. Add every color first, then set the exact percentages you want.
- What is the first line in the copied CSS?
- It is a solid background color equal to the stop with the lowest position. Browsers that do not understand gradients use that line, while all modern browsers ignore it and use the gradient on the second line.
- How do I make a hard edge instead of a blend?
- Give two neighboring colors the same percentage in their "at" boxes. The CSS then switches color at that point with no transition, which is how stripes and split backgrounds are made.
- Why is there no Angle slider on Radial?
- A circular gradient radiating from the center has no direction to rotate, so the slider is hidden. Linear uses the angle as its direction, and Conic uses it as the starting point of the sweep.
- How many colors can I use?
- From two to six. The X button disappears when only two remain because a gradient needs at least two stops, and Add Color disappears once you reach six.
How to use Gradient Generator
The preview box shows your gradient live. Start with the two default color pickers, Color 1 and Color 2, and change either one. Under each is an "at" box where you type its stop position from 0 to 100 percent. Press Add Color for more stops, up to six, or the X beside a color to remove one while two remain.
Choose Linear, Radial or Conic with the buttons. Linear and Conic show an Angle slider from 0 to 360 degrees; Radial hides it. Below the preview the exact CSS appears.
Press Copy CSS to copy two lines: a plain background color taken from your first stop, followed by the gradient. The plain line acts as a fallback for browsers that cannot draw gradients.
When to use it
Use it to design a hero banner, button or card background and get CSS you can paste directly. It is handy for trying a three-stop sunset against a two-stop fade, for building a conic sweep behind a chart or avatar, or for working out which angle makes a diagonal band read well before touching your stylesheet.
When not to use it
Choose a fuller tool when you need transparency in a stop, repeating stripes, an elliptical or off-center radial, or color-stop hints, since none of those are offered here. Colors come from the browser's color picker as solid hex values with no alpha. For smooth gradients across wide hue gaps, check the result on a real screen as well.
Tips for best results
Adding or removing a color re-spaces every stop evenly, which overwrites positions you typed, so add all your colors first and tune the percentages last. Putting two stops at the same percentage creates a hard edge instead of a blend, a quick way to make stripes. For Conic, the angle sets where the sweep starts, so rotating it spins the whole wheel.
Limitations
Radial is always a circle centered in the box, with no size or position controls. Conic always centers at 50 percent by 50 percent. A maximum of six stops is allowed, positions are rounded to whole percents and clamped between 0 and 100, and the preview box has a fixed height, so it cannot show how the CSS stretches across your actual layout.
Privacy
The gradient string is built from your colors and angle by a short function in the page, and the preview is just that CSS applied to a div. Nothing is rendered on a server or saved. Copy CSS writes to your clipboard only. The site's own usage counter may log the tool name with an anonymous browser id after you interact.
Next: Box Shadow Generator
Pick a consistent shadow style
More from Design & Color: