Gradient Generator
Build linear, radial, and conic CSS gradients with multi-stop control and a live preview.
background: linear-gradient(135deg, #0ea5e9 0%, #a855f7 100%);
About the Gradient Generator
The Gradient Generator builds CSS gradients you can paste straight into a stylesheet. Instead of guessing hex values and angle degrees by hand and reloading the page to check, you pick colors, drag positions, and watch a large preview panel update as you go. It handles the three gradient functions CSS actually ships: linear, radial, and conic. When the result looks right, you copy one line of CSS and move on.
You start from a preset or the default two-color blend, then edit color stops. Each stop has a color picker, a hex text field, and a position slider from 0 to 100 percent. Stops are sorted by position automatically, so you can add one anywhere without reordering. An angle slider from 0 to 360 degrees controls linear and conic gradients; radial gradients are fixed to a circle at center, so the angle control hides for that type. The output is a single background declaration.
Gradients render in the page as you move the stops, so it is free and needs no signup. Nothing you type is uploaded. The preview is rendered by your own browser's CSS engine, so what you see is exactly what your users will see, not an approximation drawn on a canvas. The Copy CSS button writes the declaration to your clipboard, and you keep working. There is no account, no export queue, and no watermark on anything you make.
How to use the Gradient Generator
- 1Pick a gradient type with the linear, radial, or conic buttons at the top of the panel.
- 2For linear or conic gradients, drag the Angle slider to set the direction from 0 to 360 degrees.
- 3Edit each color stop using its color swatch, its hex text box, and its position slider.
- 4Click + Add stop to insert another color, or the X button to delete a stop (two stops is the minimum).
- 5Click any of the five preset swatches to load a ready-made color combination as a starting point.
- 6Click Copy CSS to copy the full background declaration to your clipboard.
What you can use it for
Hero section backgrounds
You need a diagonal background for a landing page hero. Set linear, drag the angle to 135 degrees, pick two brand colors, and copy the declaration into your section's CSS. The live preview shows the exact blend before you touch your codebase.
Conic pie and loader effects
Conic gradients drive spinner masks and simple pie visuals. Switch to conic, add three or four stops with sharp position values, and adjust the starting angle until the wedges line up. Copy the result into a div and refine from there.
Matching an existing palette
You already have brand hex codes. Type each one into a stop's text field rather than guessing with the picker, set positions to control where colors meet, and export CSS that stays exactly on brand instead of drifting toward whatever the picker suggests.
Learning gradient syntax
If you are unsure how conic and radial functions differ, change the type buttons and read the generated CSS. Seeing from 135deg for conic versus circle at center for radial teaches the syntax faster than reading the spec cold.
Frequently asked questions
Does this send my colors to a server?
No. The tool is a client-side component that runs in your browser. Color values, positions, and the generated CSS never leave your machine, and the Copy CSS button uses your browser's clipboard directly. There is no upload step and no account, so nothing you build here is stored or transmitted anywhere.
What is the minimum and maximum number of color stops?
The minimum is two stops. The X delete button only appears when you have more than two, so you cannot reduce a gradient below two colors. There is no fixed upper limit built into the tool, so you can keep clicking + Add stop to layer in more colors as your design needs them.
Why does the angle slider disappear on radial gradients?
Radial gradients are generated as circle at center, which has no rotation angle to set, so the Angle control is hidden for that type. It reappears when you switch back to linear or conic, where the angle sets the direction of the linear blend or the starting point of the conic sweep.
Can I use rgb, hsl, or named colors instead of hex?
You can type any valid CSS color into a stop's text field, and it goes straight into the output. Note the small square color picker next to it only understands 7-character hex, so it falls back to showing black when the value is not a plain hex code, even though your typed value still works in the CSS.
Where does the new stop appear when I add one?
A new stop is placed at the midpoint between your last two stops by position, and it copies the color of the highest-positioned stop. That gives you a sensible starting point near the end of the gradient, which you then recolor and reposition with its own controls.
What exactly does the Copy button copy?
It copies a single line: the word background, followed by the gradient function and a semicolon, for example background: linear-gradient(135deg, ...);. You can paste that directly onto an element as a CSS rule. It is the same string shown in the CSS box above the button, so there are no surprises.