Create stunning CSS gradients. Linear, radial, and conic — with live preview and one-click copy.
A CSS gradient generator turns a set of color stops into a linear, radial, or conic gradient and writes the CSS for you. In HexColor Pro you add or move stops, watch the result live, and copy the finished background declaration — it stays pure CSS, so it scales without image files.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Click any preset to apply it instantly.
The most common type. Colors transition along a straight line. Use the angle slider to rotate the direction.
to right — left to right (equivalent to 90°)to bottom right — diagonal gradient135deg — precise angle controlColors transition outward from a center point. Great for backgrounds, buttons, and spotlight effects.
Colors transition around a center point (like a color wheel). Perfect for pie charts, color wheels, and creative effects.
Try our Palette Generator to build full color schemes, or the Contrast Checker to ensure accessibility.
Linear blends colors along a straight line at a set angle, radial blends outward from a center point, and conic sweeps colors around a center like a clock face. CSS exposes them as linear-gradient(), radial-gradient(), and conic-gradient(), all supported in current browsers.
Two stops are the minimum and stay predictable across browsers; three or four let you control the midpoint. Past about six stops a gradient starts to band on 8-bit displays, so add noise or interpolate in a wider color space instead of adding more stops.
Banding comes from 8-bit color steps: a slow transition between similar colors shows visible stripes. Shorten the transition distance, add a subtle noise overlay, or interpolate in a wider color space such as oklab with CSS color interpolation.