Gradient Generator
Build a linear CSS gradient from two colors and copy the exact CSS — a small, focused tool for the single most common gradient use case.
linear-gradient(90deg, #7C6CF6 0%, #34D9C4 100%)
How it works
A CSS linear-gradient() interpolates between color stops along a direction you specify (angle in degrees, or a keyword like 'to right'); by default the browser interpolates each RGB channel linearly between the two stop colors, which is fast but can produce a slightly muddy or gray-looking midpoint when the two colors are far apart on the hue wheel (blue-to-yellow gradients are the classic example — the RGB-interpolated midpoint often looks like a dull gray-green rather than a vivid green). The generator outputs standard two-stop RGB-interpolated linear-gradient() syntax, which is universally supported; newer CSS color-interpolation-method syntax (interpolating in OKLCH instead of RGB) can avoid the muddy-midpoint problem but has less consistent browser support as of 2026. The angle convention itself follows the CSS Images Module spec exactly: 0deg points toward the top of the element and angles increase clockwise, so a 90deg gradient runs left-to-right and 180deg runs top-to-bottom — a rotation direction that surprises people coming from standard mathematical angle convention, where 0° usually points right and increases counterclockwise.
Worked example
A gradient from #4C8DF6 (blue) to #F6C744 (gold) at a 90° angle outputs `linear-gradient(90deg, #4C8DF6, #F6C744)` — paste that directly into a `background` or `background-image` CSS property. Because the browser interpolates in RGB by default, the exact visual midpoint (around 50%) will land close to a grayish blue-green rather than a saturated color, which is expected default behavior, not a bug. Compare that to a same-hue-family gradient, say #1B3A5C (navy) to #4C8DF6 (the same blue as above) at 180deg: `linear-gradient(180deg, #1B3A5C, #4C8DF6)` — because both stops share roughly the same hue, the RGB-interpolated midpoint stays a clean, saturated mid-blue rather than muddying, which is the general rule of thumb: gradients between colors that are close on the hue wheel avoid the muddy-midpoint problem almost entirely, while gradients between hues far apart (especially near-complementary pairs) are the cases most likely to need the OKLCH-interpolation workaround.
When to use this tool
Reach for this when you need a quick, correct two-color linear gradient and want to skip hand-typing the CSS function syntax and angle convention from memory. It's also useful as a fast way to preview whether a specific two-color combination will suffer the muddy-midpoint problem before committing it to a hero banner or large background element, since the live preview shows the actual browser-rendered interpolation rather than just the two endpoint swatches side by side. If your gradient needs more than two stops, or you specifically want to avoid the muddy-midpoint RGB-interpolation effect described above, you'll need to hand-edit the output CSS to add more stops or switch to the newer color-interpolation-method syntax — this tool covers the common two-stop case, not every possible gradient configuration.
Precision & accuracy
The generated CSS syntax is copied exactly as standard-compliant linear-gradient() output — there's no rounding or approximation involved in generating the CSS string itself, since it's a direct text template filled with your exact hex values and angle; any 'imprecision' you perceive in the rendered gradient comes from the browser's own RGB interpolation behavior between your two exact stop colors, not from anything this tool computes or approximates. It's also worth knowing that gradient rendering itself can vary subtly between browsers at the sub-pixel level (dithering behavior on large flat gradients differs slightly across rendering engines, sometimes visible as faint banding on lower-color-depth displays), which is a browser-implementation detail entirely outside this tool's control, not a flaw in the copied CSS.
FAQ
Can I use more than two stops?
The current tool supports two-stop linear gradients; multi-stop support is a planned addition — for now, chain multiple two-stop gradients as CSS layered backgrounds if you need more control points.
Why does the middle of my gradient look muddy?
Standard CSS linear-gradient() interpolates in RGB by default, which can produce a dull, desaturated midpoint between hues that are far apart on the wheel — this is standard browser behavior, not an error in the generated CSS.
Radial or conic gradients?
This tool generates linear gradients only; the output CSS syntax is easy to adapt to radial-gradient() or conic-gradient() manually by swapping the function name if you need those shapes.
Can I preview the gradient before copying the CSS?
Yes — the live widget renders the actual gradient as you adjust colors and angle, so what you see is exactly what the copied CSS will produce in a browser.
Does the angle work the same as a protractor?
No — 0deg in a CSS gradient points toward the top of the element rather than to the right, and rotation runs clockwise rather than counterclockwise, so the numeric value maps onto the box differently than a math-class protractor would suggest.
Will my gradient look the same on every browser?
The generated syntax is standard CSS supported identically across all modern browsers for stop colors and angle, though very subtle sub-pixel dithering on large flat gradients can differ slightly between rendering engines — not something the generated CSS itself controls.