CSS Gradient Generator

Design linear, radial, and conic CSS gradients with a live visual editor. Add as many color stops as you need, adjust angle and position, then copy the ready-to-use CSS code.

How to Use the CSS Gradient Generator

  1. Choose gradient type: Click Linear, Radial, or Conic at the top. Linear is the most common — colors flow in one direction. Radial radiates from a centre point. Conic sweeps around a centre like a pie chart.
  2. Set the angle: For linear and conic gradients, drag the slider or type an angle value (0–360°). 0° goes top to bottom, 90° goes left to right, 135° is diagonal.
  3. Add and edit color stops: Click the color swatch to open a color picker. Change the position (%) to control where each color transitions. Click "+ Add Color Stop" to add more colors. You need at least two stops.
  4. Use a preset: Click any preset swatch to load a professionally designed gradient as a starting point.
  5. Copy the CSS: Click "Copy CSS" to get the full background property ready to paste, or "Copy background value" for just the gradient function value.

Frequently Asked Questions

A linear-gradient transitions colors along a straight line at a given angle. A radial-gradient radiates outward from a centre point (great for spotlight effects). A conic-gradient rotates colors around a centre point — commonly used for pie charts and colour wheels.
For modern browsers (Chrome 26+, Firefox 16+, Safari 7+, Edge 12+) vendor prefixes are not required. All major browsers have fully supported unprefixed CSS gradients for years. The tool generates clean, standard CSS without unnecessary prefixes.
You can add as many color stops as you need — there is no limit in CSS gradients. Each stop has a color and a position (0%–100%). You can add sharp color transitions by placing two stops at nearly the same position.
Yes. Use the generated gradient with background: [gradient] combined with -webkit-background-clip: text; -webkit-text-fill-color: transparent; (also add the unprefixed versions). This works in all modern browsers.
Yes, completely free. No account, no installation, no limits. Everything runs in your browser — close the tab and it's gone; nothing is saved or sent to any server.
Place two consecutive color stops at the same position. For example: linear-gradient(red 50%, blue 50%) creates a sharp red-to-blue split at exactly 50%. In this generator, set two stops to the same % value to achieve this effect.

Related Tools