Gradient Generator
Gradient Generator — runs in your browser. Inputs are not stored.
Gradient generator
Enter values, then press Calculate.
Preview
Generates linear-gradient CSS in real time. At least two colors are required.
How to use
- Choose a type (linear or radial), a direction, and at least two colors.
- Use Add color / Remove color to change how many stops you have. Two or more colors are required.
- Check the live preview, then copy the
backgroundCSS with Copy. - Reset restores the default two-color linear gradient.
Key concepts
A CSS gradient is a background image, not a solid background-color. Linear gradients follow an angle or keyword such as to right; radial gradients spread from the center. Each extra stop adds a color along that path. The generator outputs a single background declaration you can paste into a stylesheet. It does not emit hover, animation, or vendor-prefix rules.
Hard stops (two colors at the same percentage) look like stripes. Soft blends use different percentages. Hex and RGB from the picker both work. Generation runs only in the browser. For transparency, edit the copied CSS to rgba/hsla—the picker is typically opaque hex.
Example
A linear gradient from #4f46e5 to #06b6d4 toward the lower right is a common hero background. Add a mid stop at 50% for a three-color blend. Copy the value after background: and use it as-is. Hero sections often look good near 135deg over a photo overlay. For buttons, 180deg (slightly lighter at the top) is a common pattern. When you retry the same input, reset first so old output is not mixed in. On a shared computer, clear the fields when you finish. Closing the tab discards what you pasted; you do not need to send a delete request to a server. Button names match the tool at the top of the page. If the result is empty, check required fields and that an error is not hidden.
Related: Box shadow generator · Color picker
Frequently asked questions
Can I make a repeating or conic gradient?
This version outputs linear and radial CSS. Repeating and conic syntax are not included.
How many colors can I add?
Use Add color to add stops. At least two colors are required.
Does Copy include the property name?
It copies a full <code>background: ...;</code> declaration. If you only need the function, delete the property name after pasting.
Are vendor prefixes added?
No. Modern browsers understand standard <code>linear-gradient</code> / <code>radial-gradient</code>.
Is the CSS saved on a server?
No. It is generated only in the browser.
Can I use transparent colors?
Hex from the picker is typically opaque. For alpha, paste rgba/hsla into the stylesheet after copying.
Last reviewed: 2026-09-04