%
%
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
How to use
01
Choose the gradient type
Switch between the Linear, Radial, and Conic tabs. Linear and conic expose an angle slider from 0 to 360 degrees, while radial always draws a circle from the center.
02
Set your color stops
Start from the two defaults and add up to six stops total. Each one takes a hex color and a 0 to 100 percent position, with a Remove link once you have more than two.
03
Copy the CSS
The output block shows the complete rule, for example background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); and the copy button grabs the whole line.
Why Gradient Preview
- All three modern gradient types in one place.
- Live preview updates as you tweak.
- Outputs standards-compliant CSS.
Common questions
What direction do gradient angles point in the preview?
Drag the angle slider and watch the canvas move in real time. Remember the CSS convention: 0 degrees points up, 90 points right, and 180 points down. If you want to preview linear gradient directions that match a Figma comp, Figma's angle usually needs converting, so trust the visual rather than the number.
How many stops does this gradient tester allow?
Six stops, which handles nearly every production gradient. The Add color stop link disables itself at the cap, and Remove is disabled once you're down to the minimum of two.
Can the gradient preview produce radial and conic CSS too?
Yes. The Radial tab outputs radial-gradient(circle, ...) and the Conic tab outputs conic-gradient(from Ndeg, ...), each with your full stop list. Conic mode is the quick way to prototype pie-chart style backgrounds without JavaScript.
Why does my gradient show visible bands instead of a smooth blend?
Banding appears when a long stretch of screen has to cover a small color distance, so the 8-bit steps become visible. Nudge your stop positions closer together, add an intermediate stop, or pick endpoint colors that differ more in lightness.
Will the copied gradient code work across browsers?
The tool emits standard unprefixed syntax. Linear and radial gradients have been safe everywhere for a decade, and conic-gradient has shipped in all major browsers since 2020, so no vendor prefixes are added or needed.
Is this the same engine as the CSS Gradient Generator?
Same engine, same controls, listed twice on purpose. Designers browsing color tools find it here, developers browsing CSS tools find it there, and both get identical output.
How can I check a gradient behind real text?
Copy the generated background line, open your page in devtools, and paste it onto the element's styles right there. Two seconds of that beats guessing, and you can confirm contrast over the gradient's lightest region with the Color Contrast Checker.