CSS Gradient Generator
Build linear, radial, or conic gradients with color stops and copy the CSS.
Drag the center point on the preview, or focus it and use the arrow keys. Hold Shift for 10% steps.
Click the bar to add a stop. Drag a handle, or focus it and use the arrow keys (Shift for 10%). Delete removes the focused stop.
OkLab and OkLCh blend through smoother, brighter midpoints. They need a modern browser (Chrome 111+, Safari 16.2+, Firefox 127+); older browsers ignore the gradient and show the fallback color.
The CSS includes a solid background-color fallback from the first stop. The page URL updates as you edit, so you can bookmark or share a gradient. Everything runs in your browser.
Your inputs stay in this browser. These tools do not upload your text or colors.