Z

CSS Gradient Generator

Design CSS gradients visually and copy the code.

Runs in your browser — files never leave your device

background: linear-gradient(160deg, #5A3FF0, #7A52F5);

How it works

Pick two colors and an angle, and the tool assembles a standard CSS linear-gradient() value, paints it on the live preview, and hands you a finished declaration to copy. With the defaults the output is background: linear-gradient(160deg, #5A3FF0, #7A52F5); — exactly the string the copy button puts on your clipboard, ready for a stylesheet, an inline style or a CSS-in-JS object. No build step and no vendor prefixes: unprefixed gradients work in every modern browser.

The syntax reads left to right: first the angle, then the color stops in order. Angles rotate clockwise like a compass needle — 0deg points up so the gradient runs bottom-to-top, 90deg runs left-to-right, 180deg top-to-bottom, and the default 160deg is a mostly-downward diagonal. Because the tool writes no stop positions, the first color implicitly sits at 0% and the second at 100%, and the browser interpolates every pixel between them in sRGB. The slider moves in whole degrees from 0 to 360, and the two colors come from native pickers, so the hex codes are always full six-digit values.

Treat the copied CSS as a starting point rather than a locked format. You can add more comma-separated stops with optional percentages — linear-gradient(160deg, #5A3FF0, #7A52F5 40%, #FFFFFF) — or swap linear-gradient for radial-gradient(circle, …) while keeping the same colors. The hex codes are plain text in the output, easy to retune by hand later.

Where a two-stop gradient earns its keep:

  • Hero and section backgrounds that need depth without an image
  • Buttons, badges and cards in a brand duotone
  • Skeleton-loading shimmers and chart fills
  • Social preview images assembled from HTML

Two gotchas. Subtle gradients across large areas can show banding — visible stripes — because screens render only 256 levels per channel; nudging the colors closer, adding a midpoint stop or overlaying faint noise hides it. And text placed on a gradient has no single contrast ratio: the background changes across the surface, so check legibility against both the lightest and the darkest end before shipping — running a contrast check on each endpoint color gives you the honest worst case.

Frequently asked questions

What CSS does the tool output?
A complete declaration in the form background: linear-gradient(160deg, #5A3FF0, #7A52F5); — the angle first, then the two color stops. It works unprefixed in every modern browser, so you can paste it straight into a class, an inline style or a CSS-in-JS object.
How do the angle degrees map to a direction?
CSS gradient angles rotate clockwise from the top: 0deg runs bottom-to-top, 90deg left-to-right, 180deg top-to-bottom and 270deg right-to-left. Keyword syntax is equivalent — “to bottom” is the same as 180deg. Diagonals like the default 160deg simply sit between those anchors.
Can I build a gradient with three or more colors?
The picker generates two stops, but the output is plain CSS, so add more by hand: linear-gradient(90deg, #5A3FF0, #7A52F5 40%, #FFFFFF) inserts a positioned middle stop. Each stop takes an optional percentage, and stops without one are spaced evenly along the line.
Why does my gradient look stripey instead of smooth?
That’s banding: an 8-bit screen has only 256 levels per channel, and a long, subtle fade may need finer steps than the display can show. It is most visible in dark, low-saturation gradients across large areas. Bringing the two colors closer together, shortening the gradient or overlaying a very faint noise texture hides it.
Is text on a gradient background accessible?
It can be, but contrast varies across the surface — a text color that passes against the dark end may fail against the light end. Check your text against both endpoint colors and design for the worse of the two, or put a translucent overlay behind the text.
Is anything uploaded?
No. The preview and the CSS string are generated entirely in your browser; your color choices never leave the page.

Related tools