CSS Gradient Generator
Build a linear or radial gradient visually with any number of color stops, then copy the CSS.
Color stops
How it works
Every stop is an object holding a color and a position from 0 to 100. On each change the
stops are sorted by position before serialization, so you can type positions in any order
and the output stays valid, then joined into either
linear-gradient(<angle>deg, ...) or
radial-gradient(circle, ...) depending on the type you picked. That exact
string is set as the preview's background and printed as the output, so the
preview is rendered by your browser from the same CSS you'll copy, not a lookalike. New
stops drop in at 50% in green so you can spot them, and the remove button only appears once
you have more than two stops, since a gradient needs at least two.
If a gradient between two saturated colors looks muddy in the middle, that's not this tool,
that's CSS: browsers interpolate gradients in the sRGB color space by default, and the
straight line between certain pairs (blue to yellow is the classic) passes through
desaturated gray. Two fixes: add a stop in the middle and set it to the vivid intermediate
color you actually want, which this tool makes easy, or use the newer color-space syntax
like linear-gradient(in oklab, blue, yellow), which modern browsers now
support and which interpolates perceptually so the middle stays clean. Worth knowing before
you blame your color choices.
The gradient string is built and applied entirely in this page's JavaScript; picking colors and dragging the angle slider triggers zero network requests, which the DevTools Network tab will happily confirm.
Common questions
Can I add more than two colors?
Yes, click "Add color stop" as many times as you like. Each stop has its own color and position percentage, so you can build multi-color gradients, not just simple two-tone ones.
What's the difference between linear and radial?
Linear gradients transition in a straight line at whatever angle you set. Radial gradients transition outward from a center point in a circle, angle doesn't apply to those.
Is this sent anywhere?
No, the gradient is built and previewed entirely in your browser's CSS engine. Nothing is uploaded.