Customize
Angle90°
Live Preview
CSS Code
Linear & Radial Gradients • Live Preview • One-Click CSS
This tool builds a linear-gradient() or radial-gradient() background visually — add as many color stops as you like, drag each one to the exact position you want along the gradient, and pick an angle (for linear) or shape and position (for radial). The preview updates live as you adjust anything, and the finished CSS is ready to copy with one click. A few quick presets are included as a starting point if you'd rather tweak an existing combination than start from scratch. All processing happens locally in your browser.