Free · no sign-up · runs in your browser
CSS Gradient Generator
Turn two or three brand colors into a paste-ready background: line. Linear, radial or conic — tweak the stops, watch the preview, copy the CSS.
Build the gradient
Drag the handle (or use ↑ ↓) to reorder. Invalid hex keeps your last valid color.
Live preview
320 × 200background: linear-gradient(90deg, #4F46E5 0%, #0EA5E9 100%);How it works
Three steps, no page reload, no account.
Choose linear, radial or conic. The direction controls swap to match — angle in degrees, or an x/y center for radial.
Add up to eight stops, nudge positions 0–100% and reorder with the drag handle. Preview and code update on every keystroke.
Grab the background: declaration, or switch to the Tailwind tab for the bg-[…] arbitrary-value class.
FAQ
Does this send my colors anywhere?
No. All sanitizing, clamping and code generation happen in your browser — nothing is uploaded and there is no sign-up.
What happens if I type a broken hex value?
The field flags red and your last valid color is kept, so the preview and code never break. Short 3-digit hex like #0af expands to #00aaff.
Why is my stop order different in the code?
The preview sorts stops by position so you always see the intended blend, while the generated CSS keeps your original order. Two stops at the same position: the later color wins.
Is the Tailwind snippet valid for v4?
Yes — spaces inside the arbitrary value are swapped for underscores, which is the syntax Tailwind expects: bg-[linear-gradient(90deg,#4F46E5_0%,#0EA5E9_100%)].