Gradient Generator
Compose a two-color gradient and copy the CSS.
How to use Gradient Generator
Build a two-color CSS linear gradient and copy the generated rule.
Open Gradient Generator on toolpermarket and fill in the inputs the tool asks for.
In the Color 1 field, pick the starting color of the gradient. Choose colors at least a little apart or the gradient will look flat.
In the Color 2 field, pick the ending color. Analogous colors give subtle blends; contrasting colors give bold ones.
In the Angle field, set the direction in degrees, 0 to 360, for linear gradients. 90deg runs left to right; 180deg runs bottom to top.
In the Type field, choose linear or radial spread. Radial works well for buttons and focal spots; linear for backgrounds.
Press Generate to compute the result. The output appears immediately below the form. Adjust the inputs and recalculate as many times as you need.
Read the result and use it as needed. If the number looks off, re-check your inputs and run it again — the math is deterministic, so the same entries always return the same answer.
Worked example. A linear gradient from 397aac to e6eef4 at 135deg produces the soft lake-blue wash used behind cards on this site.
Tips for accurate results.
Copy the generated CSS verbatim — both the modern and prefixed lines are included.
Keep one color light and one darker for readable, pleasant blends.
Preview on a real element; a gradient that looks good in a swatch can clash with text on top.
When to use Gradient Generator. Backgrounds and hero washes for landing pages. Subtle button and card fills that feel less flat than solid color. Quick exploration of a two-color brand palette.
When you actually reach for this
- You need a CSS gradient (background) for a button, banner, or page section.
- You want to preview color stops before writing the style.
Where this tool stops being accurate
- The output is CSS code, not an image file, unless you also export it as a PNG.
- Color stops and angle are exactly what you set; browser support for modern gradient syntax is universal but very old browsers may differ.
Frequently asked questions
What CSS does the generator output?
It produces a ready-to-paste CSS background-image using the linear-gradient or radial-gradient function, including both the standard property and a vendor-prefixed fallback where relevant. You copy the block as shown and drop it into your stylesheet or inline style without further edits.
Why are two color stops sometimes not enough?
Two stops give a clean, simple blend, which suits most UI work. If you want bands, hard edges or a multi-hue effect, you can add intermediate stops by editing the copied CSS, but for the common case two colors at a chosen angle are all you need.
Does the gradient work in older browsers?
Modern browsers support CSS gradients natively. The generator includes a prefixed line for older WebKit-based engines, and as a safety net you can set a solid background-color first so any browser that somehow ignores the gradient still shows a sensible flat color instead of nothing.
Can I paste this straight into CSS?
Yes. Copy the generated background (or background-image) value into your stylesheet. Export to PNG only if you need an actual image.